Resizing graphical user interfaces

ABSTRACT

The present disclosure is directed toward systems, and corresponding computer-readable media and methods for resizing a graphical user interface. For instance, the systems described herein detect a user selection of an object within a graphical user interface, segment the user selection into quadrants, and move the quadrants to resize the selected object based on the user input. The systems further place a pivot point within the selected object to partition the object into the quadrants. The systems detect movement of one or more selected edges and move the quadrants together with movement of the one or more selected edges to resize the selected object.

CROSS-REFERENCE TO RELATED APPLICATIONS

The present application is a continuation of U.S. application Ser. No.15/709,061, filed on Sep. 19, 2017. The aforementioned application ishereby incorporated by reference in its entirety.

BACKGROUND

When using a digital workspace for resizing objects within a graphicaluser interface to, for example, rescale a user interface from smartphonedimensions to tablet dimensions, it is often desirable to scale agraphical user interface while maintaining spacing between objects orelements and without losing the overall look and feel of the interface.Conventional interface resizing systems enable a user to manipulateobjects (e.g., images, buttons, or other user selections) within agraphical user interface to relocate or resize each object, andconventional systems provide tools for a user to manipulate dimensionsof a graphical user interface. However, while conventional systems doprovide users the ability to scale user interfaces to, for example,reformat for devices that have different dimensions (or for otherpurposes), conventional systems nonetheless have several disadvantages.

For example, conventional systems are often complicated and require ahigh level of sophistication on the part of the user to be effective.For instance, some systems only enforce specific, user-definedconstraints on a graphical user interface, which requires a user to knowhow to define each constraint, and further requires a user to understandhow the system will treat each input to yield a particular result. Thus,these conventional systems are not widely usable because of their morecomplex nature.

Another disadvantage of conventional systems is that conventionalresizing systems cause object distortion or other undesirable visualeffects. For instance, when a user resizes a digital object using someconventional systems, the object can stretch or squish as the user movesa selected corner of the object in one direction or another, distortingelements within the object. By distorting the appearance of the object,conventional systems suffer from inadequacies in consistentlymaintaining the characteristics of the object throughout a user input toresize the object.

Thus, there are several disadvantages with regard to conventional userinterface resizing systems.

SUMMARY

One or more embodiments described herein provide benefits and solve oneor more of the foregoing or other problems in the art with systems,methods, and computer-readable media for resizing a graphical userinterface. In particular, the systems, methods, and computer-readablemedia described herein enable a user to select an object (e.g., aportion of a graphical user interface, such as an image, a link, a textbox, a graphic, or other digital content) within a graphical userinterface (or to select all the objects of a graphical user interface).To illustrate, in accordance with some embodiments of a disclosedinterface resizing system, the system enables the user to select anobject and then resize the object by moving one or more edges (e.g., byselecting and moving a side or corner) of the object. The interfaceresizing system determines relationships (e.g., based on distance)between the edges of the selected object (or between a selectionboundary around a selection of multiple objects) and the content withinthe object. The interface resizing system maintains the determinedrelationships while resizing the selected object in accordance with themovement of an edge or corner of the object by the user.

To illustrate, and by way of an example, a system as described hereindetects a user selection of an object (or multiple objects) of agraphical user interface. Based on the detected selection, the systemadds and positions a pivot point within the selected object to segmentthe object into quadrants. By placing the pivot point at a locationwithin the selected object, the system splits the selected object intofour quadrants, each quadrant being bounded by two edges of the selectedobject, a horizontal boundary associated with a vertical position of thepivot point, and a vertical boundary associated with a horizontalposition of the pivot point. The system then detects a user input toresize the selected object (e.g., a selection and movement of a side orcorner of the object). The system locks the movement of each quadrant tothe edges of the object bounding the quadrant. For instance, as the usermoves (e.g., by a click-and-drag type input) the selected edge(s), thesystem moves the adjacent quadrants in accordance with the user input,as will be explained in further detail below.

Additional features and advantages of the present application will beset forth in the description which follows, and in part will be obviousfrom the description, or may be learned by the practice of such exampleembodiments.

BRIEF DESCRIPTION OF THE DRAWINGS

This disclosure will describe one or more embodiments of the inventionwith additional specificity and detail by referencing the accompanyingfigures. The following paragraphs briefly describe those figures, inwhich:

FIG. 1 illustrates an example graphical user interface including variousattributes and elements in accordance with one or more embodiments;

FIGS. 2-8 illustrate resizing the example graphical user interface ofFIG. 1 in accordance with one or more embodiments;

FIG. 9 illustrates an example schematic diagram of an interface resizingsystem in accordance with one or more embodiments;

FIG. 10 illustrates an example environment in which the interfaceresizing system operates in accordance with one or more embodiments.

FIG. 11 illustrates a flowchart of a series of acts in a method forresizing a graphical user interface in accordance with one or moreembodiments;

FIG. 12 illustrates a flowchart of a series of acts in a step forresizing a graphical user interface in accordance with one or moreembodiments; and

FIG. 13 illustrates a block diagram of an example computing device inaccordance with one or more embodiments.

DETAILED DESCRIPTION

One or more embodiments described herein provide benefits and solve oneor more of the foregoing or other problems in the art with tools fordesigning and resizing graphical user interfaces. The details describedherein introduce a graphical user interface resizing system (“interfaceresizing system” or simply “system”) as well as correspondingcomputer-readable media and methods for resizing a graphical userinterface or portions thereof. To resize a graphical user interface forcompatibility with various devices, for example, the interface resizingsystem provides a simple mechanism for a user to select and resizeportions of a graphical user interface or the whole graphical userinterface using few operations.

To illustrate, the interface resizing system detects a user selection ofone or more objects of a graphical user interface. The interfaceresizing system places (e.g., adds and positions) a pivot point withinthe selected object to segment the object into quadrants. In the case ofdetecting that the user selects more than one object, however, theinterface resizing system places a pivot point with a selection boundaryaround the multiple selected objects. Indeed, by placing the pivot pointat a location within the selected object (or other selection boundary),the interface resizing system splits the selected object into fourquadrants, each quadrant being bounded by two edges (a vertical edge anda horizontal edge) of the selected object, a vertical position of thepivot point, and a horizontal position of the pivot point. The interfaceresizing system then detects a user input to resize the selected object.For example, the interface resizing system detects a user selection ofone or more edges of the object, and, in response, fixes or locks anymovement of the quadrant(s) bounded by the selected edge(s) to themovement of the selected edge(s). For instance, as the user moves (e.g.,by a click-and-drag type input) the selected edge(s), the interfaceresizing system moves the adjacent quadrants in accordance with the userinput. If the resizing enlarges the selected object in at least onedirection, the system then inserts space between the moved quadrants. Ifthe resizing reduces the size of the selected object in at least onedirection, the system then removes the resulting overlap between themoved quadrants, as will be explained in more detail below.

As mentioned, the interface resizing system provides a pivot point tosegment a selected object. The interface resizing system segments theselected object into quadrants based on the location of the pivot point.To illustrate, the interface resizing system segments, relative to theposition of the pivot point within the object, the selected object intoan upper-left quadrant, an upper-right quadrant, a lower-left quadrant,and a lower-right quadrant. In any case, when the interface resizingsystem receives user input to select an edge of the object (as describedin further detail below), the interface resizing system binds eachquadrant of the object to the edges of the object that are adjacent toeach respective quadrant. For example, the interface resizing systembinds the upper-left quadrant to the left edge of the object and also tothe top edge of the object. Additional detail regarding the segmentingof the selected object based on the location of the pivot point isprovided hereafter.

Generally, the interface resizing system places the pivot point at adefault initial location centrally within the graphical user interface.However, the interface resizing system enables a user to manipulate thepivot point. For example, the interface resizing system provides auser-selectable pivot point and, in response to detecting a user inputto select and move the pivot point, the interface resizing systemrelocates the pivot point in accordance with user input to move (e.g.,drag) the pivot point. Additional detail regarding the pivot point isprovided below.

As mentioned, the interface resizing system segments a user-selectedobject within a graphical user interface into different quadrants basedon the location of the pivot point. By segmenting the object in thisway, the interface resizing system effectively compartmentalizes theconsideration for each quadrant, treating each quadrant independentlyfrom the others. For example, when the user selects a single edge of theobject, the interface resizing system determines that the two quadrantsthat are adjacent to the selected edge will move with the direction ofthe user input to move the edge, whereas the two quadrants that are notadjacent to the selected edge will remain stationary. Likewise, when theuser selects two edges of the object (e.g., by selecting a handlelocated on a corner of the object), the interface resizing systemdetermines that the one quadrant adjacent to both selected edges willmove in both a horizontal direction and a vertical direction inaccordance with a horizontal component of user input and a verticalcomponent of the user input, respectively. In addition, the interfaceresizing system determines that the two quadrants that are adjacent toone of the selected edges move with one of the directional (e.g.,horizontal and vertical) components of the user input. The interfaceresizing system also determines that the quadrant that is adjacent onlyto non-selected edges will remain stationary. Additional detailregarding the segmented portions of objects within a graphical userinterface is provided below with reference to the figures.

As mentioned above, the interface resizing system resizes an objectwithin a graphical user interface by way of user input to move one ormore edges of the object. For instance, the interface resizing systemreceives a user input to resize or rescale the object such as, forexample, a click-and-drag input to move one or more edges of the object.As an example of user input to resize the graphical user interface, theinterface resizing system may receive a user input to increase the sizeof an object within the graphical user interface in the form of aclick-and-drag input in a direction away from a pivot point placedwithin the object, whereupon the interface resizing system increases thesize of the object by adding new space to the object. As anotherexample, the interface resizing system may receive a user input todecrease the size of the object in the form of a click-and-drag input ina direction toward the pivot point, whereupon the interface resizingsystem decreases the size of the object by removing space from theobject.

More than moving the edge(s) of the image, the interface resizing systemalso moves portions of the graphical user interface adjacent to themoving edge(s). As described above, the interface resizing systemsegments a selected digital object into quadrants based on the placementof a pivot point. In one sense, the interface resizing systemisomorphically segments the graphical user interface into rectangularportions, and binds those portions or quadrants of the graphical userinterface to the edges of the selected object. Thus, in response toreceiving user input to one or more of the edges of the object, theinterface resizing system likewise moves those quadrants that are boundto the selected edge(s).

To illustrate, when a user selects an object within a graphical userinterface, the interface resizing system places a pivot point within theselected object at an initial location-generally defaulted to the centerof the object. In addition, the interface resizing system analyzes theselected object to identify any elements (e.g., text, titles, images,etc.) within each of the four quadrants delineated by the pivot point.The interface resizing system determines whether a given element existssolely within a single quadrant or else crosses a border between two ormore quadrants. Furthermore, the interface resizing system constrainseach identified element to a corner of each quadrant in which theelement exists.

In other words, the interface resizing system determines a relationshipbetween an identified element and each of the two sides of the selectedobject that make up two sides of the particular quadrant. For instance,if the interface resizing system identifies an element in thelower-right quadrant and that only exists in the lower-right quadrant,the interface resizing system determines a distance between the elementand the right edge of the selected object and also determines a distancebetween the element and the bottom edge of the selected object. Thus,when the interface resizing system scales the selected object inresponse to user input, the interface resizing system can maintain thedetermined relationships between elements and edges, thereby preventingthe elements from distorting in size or shape.

For an element that crosses a boundary between two or more quadrants,the interface resizing system pins the element to each quadrant in whichit exists. Like the case described above where the element exists onlyin a single quadrant, the interface resizing system determines arelationship between the element and the corner formed by two of theedges of the selected object in each quadrant in which the elementexists. For example, for an element that exists in both the lower-leftquadrant and the lower-right quadrant, the interface resizing systemdetermines, for the lower left quadrant, a distance between the elementand left edge of the selected object and a distance between the elementand the bottom edge of the selected object, and for the lower-rightquadrant, the interface resizing system further determines a distancebetween the element and the right edge of the selected object and adistance between the element and the bottom edge of the selected object.In cases where an element exists in more than one quadrant, theinterface resizing system pins the object to the edges of each quadrantand thereby scales the element in accordance with user input to maintainthe relationships of the element with the edges of the object.Additional detail regarding the determination of relationships within aselected object is provided below with reference to the figures.

To resize the selected object of the graphical user interface, theinterface resizing system moves the quadrants of the object that arebound to the selected edge(s), keeping the other quadrants in place.Accordingly, as the user drags an edge or corner (e.g., two edges) ofthe object outward away from the pivot point, the interface resizingsystem moves those quadrants bound to the moving edges of the objecttogether with their respective edges. In this case, the interfaceresizing system increases the size of the object by adding space to fillthe gap created by moving the edge(s) and separating the quadrants fromtheir original positions. Similarly, as the user drags an edge or cornerof the object inward toward the pivot point, the interface resizingsystem moves those quadrants bound to the moving edges of the object tocollapse in on the other quadrant(s) of the object, resulting in themoving quadrants overlapping the non-moving quadrants. The interfaceresizing system decreases the size of the selected object by removingthe overlapped space. Additional detail regarding the addition andremoval of space from a selected object of a graphical user interface isprovided below with reference to the figures.

In some cases, the interface resizing system generates sets of elements.More specifically, in these cases, the interface resizing systemanalyzes the selected object to determine relationships between elementsand, for groups of elements that are related in a particular way, theinterface resizing system identifies these groups of elements as sets.For example, if the interface resizing system identifies a rectanglethat contains four icons laid out in a row (e.g., a banner with fourcolumn headings or banner with four equally-spaced buttons to share animage), the interface resizing system determines that, based on therelationship between the four icons within the rectangle (e.g., theuniformity of spacing), the four icons are a set. Furthermore, theinterface resizing system generates sets recursively, where one set maybe nested within another set. For instance, the interface resizingsystem may analyze the selected object to determine that the four iconswithin the rectangle are a set and may further determine that therectangle containing those four icons is part of another set of threerectangles that have a particular relationship (e.g., similar size,shape, color, alignment, spacing, etc.) between them. In some cases, theinterface resizing system analyzes the entire selection (e.g., theselected object) to determine whether any elements therein may beconsidered as part of a set based on any relationships between theelements.

With an identified set, the interface resizing system treats theelements of the set to maintain proportional positions. To illustrate,as the interface resizing system scales the selected object by movingthe quadrant(s) in response to user input, the interface resizing systemalso distributes the elements of a set within the quadrant(s) in whichthe elements are located. In particular, the interface resizing systemdistributes elements of a set within a quadrant to maintain proportionalpositions within that quadrant, relative to other elements of the setand/or to the edges of the selected object. Referring again to theexample of the four icons within a rectangle, if the rectangle spans theboundary between the upper-left and upper-right quadrants, the interfaceresizing system scales the rectangle with user input to resize theselected object and distributes the four icons within the rectangle toretain their relative positions within the rectangle. Additional detailregarding sets and determining relationships between elements isprovided below with reference to the figures.

The interface resizing system described herein provides severaladvantages over conventional systems. For example, the interfaceresizing system described herein enables a user to resize a graphicaluser interface in fewer operations than conventional systems. Whereasconventional systems typically require element-by-element scaling andplacement within a graphical user interface in a piece-meal approach,the interface resizing system described herein more intuitively analyzesa user selection to identify relationships between elements and scalesthe user selection to maintain those identified relationships.

As another advantage, the interface resizing system described hereinprovides simpler mechanics than conventional systems. Many conventionalsystems have complicated parameters that require a higher degree ofsophistication on the part of the user to know the effects of eachparameter in scaling a graphical user interface. The interface resizingsystem described herein, on the other hand, is simple and easy to use.By analyzing a user selection to determine relationships betweenelements within the user selection as well as between elements and thequadrants in which each element is located, and by maintaining thoserelationships throughout the scaling of the user selection, theinterface resizing system greatly reduces the number of factors that auser must consider when resizing a graphical user interface. Inaddition, with intuitive select-and-drag mechanics to scale an objectwithin a graphical user interface, up to and including the wholegraphical user interface at once, the interface resizing system issimple to use, and therefore appeals to a wider user base.

Furthermore, the interface resizing system described herein preventsobject distortion or other undesirable visual effects that mightotherwise results from scaling a digital object. In particular, theinterface resizing system provides constraints on elements within auser-selected object to maintain the characteristics (e.g., position,size, shape, etc.) of the elements as the interface resizing systemresizes the object. As a user moves one or more sides of an object toincrease or decrease its size, the interface resizing system maintainsthe characteristics of elements within the object to prevent theelements from distorting as the object changes size.

Because the interface resizing system requires fewer operations thanconventional systems, the interface resizing system described hereinfurther requires less data storage than conventional systems.Particularly, the interface resizing system stores fewer data pointsrelating to various tools for resizing, repositioning, and othermanipulation for each element within a graphical user interface. Rather,the interface resizing system stores information for a simple set ofmechanics to enable a user to select and move edges of an object withina graphical user interface. Additionally, because the interface resizingsystem requires fewer operations to resize a graphical user interface,the interface resizing system therefore requires less data storage thanotherwise tracking each individual operation throughout a resizingprocess.

The interface resizing system further requires less memory thanconventional systems because the interface resizing system analyzes auser selection of a graphical user interface and determinesrelationships relating to those elements of the graphical user interfacethat are within the user selection. In particular, instead of storinginformation regarding relationships between each element within theentirety of the graphical user interface, the interface resizing systemdescribed herein takes a more local approach and determinesrelationships between elements within a user-selected area, and storesthe corresponding information relating to the elements of the particularobject or area within the graphical user interface.

Because the interface resizing system requires fewer operations thanconventional systems, the interface resizing system also performs fasterthan conventional systems. In particular, the interface resizing systemanalyzes a user-selected area to determine relationships betweenelements within the user-selected area instead of analyzing the entiregraphical user interface with each iterative step of resizing thegraphical user interface. In addition, the interface resizing systemsegments the user-selected area into quadrants and treats each quadrantindividually in terms of movement in response to user input and in termsrelationships of elements to edges of each quadrant, which reduces theprocessing burden of otherwise scaling a graphical user interface whilemaintaining determined relationships between objects across the wholegraphical user interface.

More detail regarding the interface resizing system will now be providedwith reference to the figures. In particular, FIG. 1 illustrates acomputing device 100 including a digital workspace 101 presented fordisplay to a user. Additionally, the digital workspace 101 includesvarious user-selectable options, windows, tools, and other features of adigital medium environment for resizing a graphical user interface. Asshown in FIG. 1, the digital workspace 101 includes a graphical userinterface 102 for the user to select and manipulate in accordance withthe features of the interface resizing system described herein.Discussed in further detail hereafter, the graphical user interface 102includes an interface for checkout to complete a purchase via, forexample, an online marketplace where the user enters paymentinformation, billing address, etc.

As mentioned, FIG. 1 illustrates a graphical user interface 102. As usedherein, a graphical user interface refers to a digital interfacepresentable to a user by way of a display and that is interactive withthe user. For example, a graphical user interface may refer to acollection of images, banners, charts, graphs, buttons, icons, labels,and/or other elements presented within a display of a mobile device(e.g., a smartphone). Generally, a user may interact with a graphicaluser interface by, for example, selecting (e.g., with a finger, stylus,mouse, or other input device) a button or text input field to cause amobile application associated with the graphical user interface toperform a specific function. As used herein, the graphical userinterface 102 is presented for display within the digital workspace 101in a work-in-progress sense, where a user is rearranging andmanipulating buttons, images, and other elements within the graphicaluser interface 102. In other words, the graphical user interface 102 iseditable and manipulable in response to user input received via resizingtools and/or other editing tools associated with the digital workspace101.

The graphical user interface 102 of FIG. 1 includes the title “Checkout”in addition to other elements such as a payment information sectionwhere a user fills in a name, credit card number, and other information.In addition, as shown in FIG. 1, the graphical user interface 102includes handles 104 a-104 h (referred to herein collectively as“handles 104”) which enable a user to select and move various portionsof the graphical user interface 102. To elaborate, the interfaceresizing system enables a user to select the graphical user interface102 and, in response to detecting the user input to select the graphicaluser interface 102, generates a bounding box around the user-indicatedselection (e.g., the graphical user interface 102) and further generateshandles 104 along the bounding box on the edges of the graphical userinterface 102.

In some cases, as will be discusses in further detail below withspecific reference to FIGS. 7-8, the interface resizing system enablesthe user to select an individual object within the graphical userinterface 102, without selecting the whole graphical user interface 102at once. In other examples, the interface resizing system enables theuser to select multiple objects and perform resizing operations on themultiple selected objects together. As used herein, an object refers toa user-selected portion of a graphical user interface such as, forexample, a section, a column, a body of text, a user-defined area of agiven size (e.g., a click-and-drag selection area), etc. In someembodiments, an object may refer to the entire graphical user interface(e.g., graphical user interface 102), while in other embodiments anobject may refer to a portion that is less than the entire graphicaluser interface. However, for the discussion purposes of FIGS. 1-6, itwill be beneficial to describe the interface resizing system and itsfunctionalities with reference to a user selection that includes theentire graphical user interface 102.

As mentioned, FIG. 1 illustrates a user selection of the graphical userinterface 102 whereupon the interface resizing system generates thehandles 104 around the bounding box indicating the user selection. Asused herein, a handle refers to an interactive, user-selectable iconthat is generally depicted as a circle or other geometric shape. Theinterface resizing system generally places a handle on each corner ofthe user selection as well as on each edge of the user selection at themidpoint between each corner. Each handle enables the user to selecteither one or two edges of the user selection, and further enables theuser to move the selected edges in a given input direction. For example,in response to detecting a user selection (e.g., via a touch input,mouse click, etc.) of a handle located on an edge of the user selection(e.g., on a single edge), the interface resizing system determines thatthe user has selected a single edge. On the other hand, in response todetecting a user selection of a handle located on a corner of the userselection, the interface resizing system determines that the user hasselected the two edges of the user selection that intersect to form thegiven corner at which the handle is located.

In addition to generating handles on the user selection (e.g., thegraphical user interface 102), the interface resizing system furtherplaces a pivot point 106 within the user selection. As used herein, apivot point refers to a dot, circle, or other shape that the interfaceresizing system uses to separate different portions of the userselection. As shown in FIG. 1, the interface resizing system segmentsthe graphical user interface 102 into four sections or quadrants basedon the location of the pivot point 106. In particular, the interfaceresizing system segments the graphical user interface into anupper-right quadrant 103 a, an upper-left quadrant 103 b, a lower-leftquadrant 103 c, and a lower-right quadrant 103 d (referred to hereincollectively as “quadrants 103”). To segment the graphical userinterface 102 into quadrants 103 based on the location of the pivotpoint 106, the interface resizing system uses the pivot point 106 as areference for delineating the boundaries between the quadrants 103.

To illustrate, the interface resizing system places the pivot point 106at a default central location within the graphical user interface 102 asshown in FIG. 1. The pivot point 106 has a vertical position as well asa horizontal position. For instance, the interface resizing systemplaces the pivot point 106 at a particular coordinate location withinthe digital workspace 101 or within the graphical user interface 102,where the coordinate location includes a vertical component and ahorizontal component. Accordingly, the interface resizing systemsegments the graphical user interface 102 into quadrants 103, wherequadrant 103 a is located above the vertical position/location and leftof the horizontal position of the pivot point 106, where quadrant 103 bis located above the vertical position and to the right of thehorizontal position of the pivot point 106, where quadrant 103 c isbelow the vertical position and to the left of the horizontal positionof the pivot point 106, and where quadrant 103 d is below the verticalposition and to the right of the horizontal position of the pivot point106.

While FIG. 1 depicts quadrants 103 as all being the same size, in somecases, quadrants 103 may be different sizes. In particular, in caseswhere the user moves the pivot point 106 to a different location, theinterface resizing system segments the graphical user interface 102based on the new location of the pivot point 106. For instance, if theuser moves the pivot point directly downward from its location in FIG.1, then quadrants 103 a and 103 b would be the same size and would belarger than quadrants 103 c and 103 d, which would also be the same sizeas each other. Additional detail regarding moving the pivot point 106 inresponse to user input is provided below with specific reference to FIG.4.

Quadrants 103 are each bounded on two sides by edges of the userselection. In particular, since the interface resizing system generallyoperates with rectangular objects such as, for example, graphical userinterface 102, each of quadrants 103 will also be rectangular in shape.Therefore, each quadrant of quadrants 103 is bounded on two sides by twoedges of the graphical user interface 102. To illustrate, quadrant 103 ais bounded on the left by the left edge of the graphical user interface102 and on the top by the top edge of the graphical user interface 102.As another illustration, quadrant 103 b is bounded on the right by theright edge of the graphical user interface 102 and on the top by the topedge of the graphical user interface 102. Likewise, quadrants 103 c and103 d are also bounded on two sides by edges of the graphical userinterface 102.

Upon segmenting the graphical user interface 102 or other user selectioninto quadrants 103, the interface resizing system analyzes the userselection to identify elements therein. As used herein, the term elementrefers to an individual piece of content within the graphical userinterface 102 or some other user selection. In particular, an elementcan refer to a title, a text box, text within a text box, an image, anicon, a box, a line, a button, a label, etc. A given user selection suchas an object (e.g., as defined above) or the graphical user interface102 can include multiple elements. As illustrated in FIG. 1, forinstance, the interface resizing system analyzes the graphical userinterface 102 to identify elements 112 a, 112 b, 112 c, 112 d, and 112 e(referred to herein collectively as “elements 112”) within the graphicaluser interface 102. While FIG. 1 illustrates elements 112 includingvarious text portions or headings, it will be understood from thedisclosure herein that FIG. 1 includes more elements than those numberedin FIG. 1. For example, the interface resizing system identifies thecredit card image as an element, the blank checkbox as an element, thetext “Remember this card” as an element, the rectangle around element112 e as another element, the line above “Billing Address” as anotherelement, etc. For ease of discussion and illustration, however, FIG. 1includes only elements 112 to avoid clutter.

Additionally, in some embodiments, the interface resizing systemanalyzes each individual quadrant of the graphical user interface 102 todetermine whether each element exists in one or more of the quadrants103. To illustrate, the interface resizing system analyzes quadrant 103a to identify element 112 a and to determine that element 112 a existsonly within quadrant 103 a. Likewise, elements 112 b, 112 c, and 112 dexist only within quadrant 103 a. However, the interface resizing systemanalyzes quadrants 103 c and 103 d to identify element 112 e, anddetermines that element 112 crosses the boundary between quadrants 103 cand 103 d. The interface resizing system determines, for each identifiedelement throughout the user selection, whether the element exists onlywithin a single quadrant or whether the element crosses a boundary oftwo or more quadrants.

For elements that exist within a single quadrant, the interface resizingsystem determines a relationship between the element and the edges ofthe selection. To illustrate from FIG. 1, the interface resizing systemidentifies element 112 a and determines that element 112 a exists onlywithin quadrant 103 a. Furthermore, the interface resizing systemdetermines a relationship between element 112 a and the top edge of thegraphical user interface 102, and further determines a relationshipbetween element 112 a and the left edge of the graphical user interface.For instance, the interface resizing system determines a distance (e.g.,a number of pixels, a number of millimeters, a fraction of an inch, orsome other linear measurement) between element 112 a and the top edge ofthe graphical user interface 102. In some embodiments, the interfaceresizing system determines the distance between the element 112 a andthe edge by determining the distance from the closest part of theelement 112 a (e.g., the topmost part) and the edge of the graphicaluser interface 102, while in other embodiments the interface resizingsystem determines a center or midpoint of the element 112 a andcalculates a distance from the midpoint to the edge of the graphicaluser interface 102. In still other embodiments, the interface resizingsystem determines a distance based on some other part of the element 112a.

In addition to determining a distance relationship between the element112 a and the top edge of the graphical user interface 102, theinterface resizing system also determines a distance between the element112 a and the left edge of the graphical user interface 102. Forinstance, the interface resizing system calculates a distance from theleft-most part of the element 112 a and the left edge of the graphicaluser interface 102. In some embodiments, the interface resizing systemcalculates a distance from the midpoint of the element 112 a to the leftedge of the graphical user interface 102. In any case, the interfaceresizing system determines a horizontal placement of the element 112 ain addition to determining a vertical placement as discussed above.

In some embodiments, the interface resizing system additionally oralternatively determines relationships between elements (e.g., elements112) within a quadrant (e.g., quadrant 103 a). For example, theinterface resizing system determines relationships for the element 112 arelative to other elements within the quadrant 103 a as well. As shownin FIG. 1, the interface resizing system analyzes quadrant 103 a toidentify elements 112 a, 112 b, 112 c, and 112 d within quadrant 103 a.Furthermore, the interface resizing system determines a spacing ordistance between each of the elements identified within quadrant 103 a.Accordingly, the interface resizing system determines a proportionalspacing between each element within each quadrant.

In addition to determining relationships between elements, the interfaceresizing system also generates sets of elements. As used herein, a setrefers to a number of elements within a graphical user interface (e.g.,graphical user interface 102) that share features of one type or anotheror that belong together. To elaborate, a set refers to a grouping ofelements that, based on their arrangement, color, location, spacing,etc., are related. Upon analyzing each quadrant of the graphical userinterface 102, the interface resizing system generates sets of elementsand groups those sets together such that, in response to user input toresize the graphical user interface 102, the interface resizing systemscales, moves, or performs other operations to each of the elementswithin the set uniformly.

To illustrate by way of an example, the interface resizing systemgenerates a set for elements based on a centroid (e.g., a geometriccenter) of each element. For instance, the interface resizing systemidentifies a number of elements that share an alignment (e.g., avertical alignment or a horizontal alignment) in a context (e.g., withinthe same user-selected object) as a set. However, if the sameuser-selected object further contains an element that does not share thesame alignment as the other elements, then the interface resizing systeminvalidates the entire set. Thus, the interface resizing systemidentifies sets of elements based on a high degree of confidence all theelements within the purported set share alignments (or other traits)that are meaningful.

As another example, and to illustrate from FIG. 1, the interfaceresizing system generates a set for elements 112 b, 112 c, and 112 d. Inparticular, the interface resizing system determines that elements 112b-112 d are each located within the same object (i.e., the group of datainput fields for entering payment information) and have the samehorizontal alignment of each of their respective centroids, as describedabove. Indeed, as shown in FIG. 1, the center of elements 112 b-112 dare horizontally aligned within the input field box. In someembodiments, the interface resizing system further determines that eachof elements 112 b-112 d are the same font, that each of elements 112b-112 d are uniformly distributed along a vertical direction, and/orthat each of elements 112 b-112 d are left-aligned at the samehorizontal position. Accordingly, because elements 112 b-112 d sharecharacteristics that indicate to the interface resizing system that eachof elements 112 b-112 d are related, the interface resizing systemgenerates a set including each of elements 112 b-112 d, respectively.

In some embodiments, the interface resizing system considers one set ofheuristics to determine whether a given group of elements belong to aset, while in other embodiments the interface resizing system considersa different set of heuristics to do the same. Particularly, in someembodiments, the interface resizing system considers only whether asubset of elements within a user selection (e.g., graphical userinterface 102) is aligned within some other object within the selection.In other embodiments, the interface resizing additionally oralternatively considers font type, font size, color, arrangement,spacing, or other characteristics of the elements (e.g., elements 112)to determine whether the elements belong to a set. Additional detailregarding how the interface resizing system maintains relative positionsand proportional spacing of elements within a set is provided below withreference to subsequent figures.

Though not shown in FIG. 1, the interface resizing system identifieselements and relationships for those elements within quadrants 103 b,103 c, and 103 d as well. As discussed above, the interface resizingsystem determines a distance between each element and the edges of thegraphical user interface 102 that border the quadrant in which theelement is located. By determining these relationships, the interfaceresizing system determines a placement of each element within itsrespective quadrant, in accordance with the considerations discussedabove with relation to quadrant 103 a.

For these elements such as element 112 a that exist in a singlequadrant, the interface resizing system determines these relationshipsto use as a tool to maintain the overall look and feel of the graphicaluser interface 102 throughout any resizing of the graphical userinterface 102. For example, as will be discussed in further detailbelow, when a user moves an edge of the graphical user interface 102(e.g., by selecting and dragging a handle located on the edge), theinterface resizing system scales the graphical user interface 102 inaccordance with the user input, while maintaining the determineddistance relationships between elements 112 and the edges of thegraphical user interface 102.

For elements that exist in more than one quadrant (e.g., element 112 e),the interface resizing system applies similar rules during resizing. Inparticular, for the rectangular box around element 112 e (not numbered),the interface resizing system determines that the rectangle crosses theboundary between quadrants 103 c and 103 d, and, during a user input toresize the graphical user interface 102, the interface resizing systemmaintains the distance of the element 112 e and the edges of thequadrants 103 c and 103 d, and therefore scales the rectangleproportionally to keep the relationships of the element 112 e consistentwithin the graphical user interface 102. In other words, rather thanmoving the rectangle with the moving quadrant (e.g., so it stays in thesame position with regard to relevant edges of the quadrant) as wouldordinarily be the case if the rectangle existed only in a singlequadrant, the interface resizing system “pins” the rectangle within eachquadrant that it is in, and scales the rectangle to fit properly withinthe graphical user interface 102 during any resizing.

To elaborate, the interface resizing system pins elements that exist inmore than one quadrant in much the same way that the interface resizingsystem pins elements that exist only in a single quadrant. Inparticular, the interface resizing system determines a relationshipbetween the element and the edges of the user selection (e.g., thegraphical user interface 102) that form the boundaries of the quadrantsin which the element resides. As discussed above, the interface resizingsystem may determine a distance between an edge or midpoint of theelement and each of the edges of the quadrants (e.g., quadrants 103 cand 103 d) in which the element exists. Accordingly, in response to userinput to resize the graphical user interface 102, the interface resizingsystem also resizes the element to maintain its relationship within thegraphical user interface 102—i.e., to maintain its spacing from eachedge of the graphical user interface 102.

As shown in FIG. 1, the interface resizing system may detect a cursorlocation of a cursor 110 operated by a user. In particular, theinterface resizing system may detect a coordinate location of the cursor110 within the workspace 101 based on a horizontal pixel location and avertical pixel location of the cursor 110. Based on the location of thecursor 110, the interface resizing system generates visual effects fordisplay to the user to illustrate to the user how the interface resizingsystem interprets an anticipated or possible user action.

For example, in response to detecting that the cursor 110 is locatednear (e.g., within a threshold number of pixels) handle 104 b on the topedge of the graphical user interface 102, the interface resizing systemgenerates a horizontal transverse line 108 that spans the graphical userinterface 102 or some other user selection. In particular, thehorizontal transverse line 108 spans the graphical user interface 102and intersects the pivot point 106, displaying a visual representationto the user of a division of the graphical user interface 102—i.e.,separating the graphical user interface 102 into two portions bysplitting them at the horizontal transverse line 108.

In addition, the interface resizing system displays boxes around theelements 112 in response to detecting that the cursor 110 is near thehandle 104 b. As illustrated in FIG. 1, the boxes around the elements112 indicate to the user that the interface resizing system hasidentified a number of elements 112 within the graphical user interface102. In response to detecting a user input to select the handle 104 b,in some embodiments, the interface resizing system removes the boxesaround the elements 112 so that, as the user moves the top edge of thegraphical user interface 102 to resize the graphical user interface 102(as discussed in further detail below with reference to FIG. 2), theinterface resizing system avoids cluttering the view of the user. Inthis way, the interface resizing system more clearly displays thechanges in resizing the graphical user interface 102.

Additionally, the interface resizing system generates a differenttransverse line in response to detecting that the cursor 110 is locatednear a different handle (e.g., handle 104 a or 104 d). For example, inresponse to detecting that the cursor 110 is near handle 104 h on theleft edge of the graphical user interface 102, the interface resizingsystem generates a vertical transverse line that indicates to the userthat, in response to detecting a user input to select handle 104 h, theinterface resizing system will separate the graphical user interface 102into a left portion (e.g., quadrants 103 a and 103 c) a right portion(e.g., quadrants 103 b and 103 d). As discussed above, the transverseline spans the graphical user interface 102 and intersects the pivotpoint 106.

As will be discussed in further detail below with specific reference toFIG. 5, the interface resizing system generates two transverse lines inresponse to detecting that the cursor 110 is located near a handle thatis located on a corner of the user selection (e.g., graphical userinterface 102). For example, in response to detecting that the cursor110 is located near the handle 104 g, the interface resizing systemgenerates a horizontal transverse line (e.g., horizontal transverse line108) and a vertical transverse line (e.g., vertical transverse line 402)to visually separate each quadrant of the graphical user interface.

When the cursor 110 is near handle 104 b, the interface resizing systemillustrates to the user, by generating the horizontal transverse line108, that selecting handle 104 b will result in the interface resizingsystem treating the upper portion (e.g., quadrants 103 a and 103 b)above the vertical position of the pivot point 106 differently from thelower portion (e.g., quadrants 103 c and 103 d) below the pivot point106. In particular, in response to detecting a user input indicating aselection of the handle 104 b, the interface resizing system binds thequadrants 103 of the graphical user interface 102 to the edges of thegraphical user interface 102. More specifically, the interface resizingsystem binds each quadrant to those edges of the graphical userinterface 102 that are adjacent to the given quadrant.

To illustrate by example, the interface resizing system binds quadrant103 a to the top edge and the left edge of the graphical user interface102. Likewise, the interface resizing system also binds quadrant 103 bto the top edge and the right edge of the graphical user interface 102,and the interface resizing system further binds quadrant 103 c to thebottom and left edges of the graphical user interface 102, and bindsquadrant 103 d to the bottom and right edges of the graphical userinterface. In addition to binding the quadrants 103 to their respectiveadjacent edges, the interface resizing system further pins each elementin place within each quadrant (including those that cross a boundarybetween quadrants) as described above.

By binding the quadrants 103 to their adjacent edges, the interfaceresizing system moves a quadrant (including the elements therein) withany moving edge of the graphical user interface 102 to which the givenquadrant is bound. As an example, in response to detecting a user inputto move handle 104 b in an upward direction away from the pivot point106, the interface resizing system moves quadrants 103 a and 103 b in anupward direction in accordance with the user input. More specifically,in some embodiments, the interface resizing system moves quadrants 103 aand 103 b a vertical distance (e.g., a number of pixels in the verticaldirection) equal to the vertical distance of the user input (e.g., thenumber of pixels moved vertically by the cursor 110).

Indeed, in response to detecting a user input to select handle 104 b,the interface resizing system prohibits the selected edge as well as anyquadrants (e.g., quadrants 103 a and 103 b) bound to the selected edgefrom moving horizontally. To elaborate, the interface resizing systemconstrains movement of the edges of the graphical user interface 102 andthe quadrants 103 based on which handle the user selects. In response todetecting a selection of a handle located on a single edge of thegraphical user interface 102 (e.g., handles 104 b, 104 d, 104 f, and 104h), the interface resizing system constrains the movement of the edge onwhich the handle resides as well as the quadrant(s) bound to the edge toa direction perpendicular to the edge. For instance, the interfaceresizing system enables the user to select and drag handle 104 b, alongwith its edge and bound quadrants 103 a and 103 b, vertically up ordown, and prevents the user from moving the handle horizontally left orright. Additional detail regarding moving edges and quadrants bound tothose edges is provided below with reference to FIG. 2.

In cases where the user selects a handle on a corner of the graphicaluser interface 102 (e.g., handle 104 a, 104 c, 104 e, or 104 g), theinterface resizing system binds the quadrants 103 as described above.Additionally, in response to detecting a user input to move the cornerof the graphical user interface 102, the interface resizing system movesthe quadrants that are bound to the two edges that form the corner. Moreparticularly, the interface resizing system moves the selected handleboth along a horizontal dimensional and a vertical dimension. Additionaldetail regarding the movement of a handle on a corner of the graphicaluser interface 102 is provided below with reference to FIG. 6.

In some embodiments, the interface resizing system additionally oralternatively highlights a portion of the graphical user interface 102based on the location of the cursor 110. Though not illustrated in FIG.1, the interface resizing system may highlight a portion of thegraphical user interface 102 that is moveable based on a location of thecursor 110. In other words, the interface resizing system highlights theportion of the graphical user interface 102 that is adjacent to edges ofthe graphical user interface 102 that intersect the handle near whichthe cursor 110 is located. For instance, since the cursor in FIG. 1 isnear handle 104 b, the interface resizing system may highlight quadrants103 a and 103 b since those are the two quadrants that are adjacent tothe top edge on which handle 104 b is located. Similarly, for otherhandles such as handle 104 d, the interface resizing system mayhighlight quadrant 103 b and quadrant 103 d because those are the twoquadrants adjacent to the right edge on which handle 104 d resides.

FIG. 2 illustrates the digital workspace 101 on computing device 100,similar to FIG. 1. However, FIG. 2 illustrates the graphical userinterface 102 as displayed in response to detecting a user input toselect and move the handle 104 b in a vertical direction upward awayfrom the pivot point 106. In response to detecting the user input, theinterface resizing system binds quadrant 103 a and quadrant 103 b to theselected top edge and moves those bound quadrants together with theselected edge in unison with the user input. For instance, the interfaceresizing system determines a vertical component of the user input (e.g.,a number of a pixels moved in a vertical direction) and moves the boundquadrants 103 a and 103 b in accordance with the vertical component.

As shown in FIG. 2, the interface resizing system moves quadrants 103 aand 103 b upward, away from quadrants 103 c and 103 d, creating a space204 between the upper quadrants 103 a and 103 b and the lower quadrants103 c and 103 d. The interface resizing system generates, in addition tothe horizontal transverse line 108, a boundary line 202 to illustratethe size of the space 204. Additionally, like how the horizontaltransverse line 108 depicts an upper boundary of quadrants 103 c and 103d, the boundary line 202 depicts a lower boundary of quadrants 103 a and103 b. Accordingly, by providing the horizontal transverse line 108 andthe boundary line 202, the interface resizing system illustrates theseparation between the upper portion (e.g., quadrants 103 a and 103 b)and lower portion (e.g., quadrants 103 c and 103 d) of the graphicaluser interface 102, as compared to their original positions illustratedin FIG. 1. As the user drags the top edge of the graphical userinterface 102 upward, the boundary line 202 moves together with the topedge and quadrants 103 a and 103 b, which are bound to the top edge. Theinterface resizing system, however, does not move the horizontaltransverse line 108.

Indeed, the interface resizing system maintains a position of eachquadrant that is not adjacent to a moving edge of the graphical userinterface 102. Thus, the interface resizing system keeps quadrants 103 cand 103 d in place while moving quadrants 103 a and 103 b upwardbecause, as FIG. 2 illustrates, the top edge is the only moving edge.Accordingly, the interface resizing system moves only quadrants 103 aand 103 b, which are bound to the moving edge, and the interfaceresizing system does not move quadrants 103 c and 103 d, but rathermaintains their stationary position, because quadrants 103 c and 103 dare not bound to a moving edge.

The space 204 between the quadrants 103 indicates a vertical distance ofthe user input, and further indicates the distance that the interfaceresizing system moves quadrants 103 a and 103 b. Particularly, theinterface resizing system moves quadrants 103 a and 103 b upward inresponse to a user input to move the top edge of the graphical userinterface 102, separating the graphical user interface 102 and creatinga gap illustrated by space 204. In some embodiments, on the other hand,the space 204 is not a gap depicting a separation of the graphical userinterface 102, but is rather a depiction of new space within thegraphical user interface 102 to show an expansion of a portion of thegraphical user interface 102 at the location of the horizontaltransverse line 108. In any case, the interface resizing systemincreases the size of the graphical user interface 102 in the verticaldirection by moving quadrants 103 a and 103 b upward together and addingspace below them above quadrants 103 c and 103 d.

As shown in FIG. 2, the interface resizing system detects a verticalcomponent of the user input. Generally speaking, the user input has botha horizontal component and a vertical component such as, for example, anumber of pixels moved in a horizontal direction and a number of pixelsmoved in a vertical direction. In response to detecting the user inputto select handle 104 b on the top edge of the graphical user interface102, the interface resizing system determines to ignore any horizontalcomponent of the user input while moving the handle 104 b, and considersonly the vertical component. In particular, the interface resizingsystem moves the quadrants 103 a and 103 b vertically up or down indirect correlation with the vertical component of the user input. Asshown in FIG. 2, for example, the interface resizing system movesquadrants 103 a and 103 b upward a distance equal to a verticalcomponent of the user input to create the space 204.

In some embodiments, the interface resizing system highlights the space204 to indicate that the space 204 is not yet fixed within the graphicaluser interface 102 while the user input to move the top edge is stilltaking place. In other words, the interface resizing system enables theuser to move the top edge up or down, increasing or decreasing the sizeof the space 204 during the input. Only upon a completion of the userinput (e.g., a release of the mouse or a removal of a finger from atouchscreen) does the interface resizing system add the space 204 to thegraphical user interface 102 in response to detecting a release of theuser input to move the top edge of the graphical user interface 102. Inthese or other embodiments, the interface resizing system detects arelease of a mouse or a removal of a finger on a touchscreen thatindicates a stop to the user input. In response to detecting the releaseof the user input, the interface resizing system adds the space 204 tothe graphical user interface 102 to increase the size of the graphicaluser interface 102.

As further illustrated by FIG. 2, the elements within each quadrantretain their characteristics/attributes throughout the user input. Forexample, the interface resizing system maintains the characteristics ofelements 112 from FIG. 1 as the interface resizing system movesquadrants 103 a and 103 b. As seen in FIG. 2, the elements 112 of FIG. 1retain their relative positioning within each respective quadrant inwhich each element resides. The elements 112 further retain constantsize and shape as the interface resizing system moves quadrants 103 aand 103 b.

As shown in FIG. 2, the pivot point 106 stays centered in the space 204as the space 204 changes size with user input. In other words, becausethe pivot point 106 is centered within the user selection (e.g., thegraphical user interface 102), as the interface resizing system movesquadrants 103 a and 103 b in response to user input, the interfaceresizing system also moves the pivot point 106 to maintain itspercentage position within the user selection. Thus, in FIG. 2, thepivot point 106 stays centrally located within the space 204.Accordingly, the interface resizing system moves the pivot point 106 ata rate slower than the quadrants 103 a and 103 b. For example, theinterface resizing system moves the pivot point 106 so as to keep itsposition within a given selection boundary proportionally the same withrespect to the given boundary. To illustrate, for a pivot point 106 thatis centered within a selection boundary, the interface resizing systemmoves the pivot point 106 at a rate of one half the rate that theinterface resizing system moves quadrants 103 a and 103 b—i.e., forevery two pixels that the interface resizing system moves quadrants 103a and 103 b in a vertical direction, the interface resizing system movesthe pivot point 106 one pixel in the same direction.

As another example, the augmented reality composition system places thepivot point 106 such that the pivot point 106 is not centered within agiven selection boundary (e.g., centered between upper quadrants 103 aand 103 b and lower quadrants 103 c and 103 d), but is instead placednearer to the bottom edge of the lower quadrants 103 c and 103 d. Forinstance, the augmented reality composition system places the pivotpoint 106 at a position one-quarter of the total vertical distance(e.g., the vertical distance between the top edge of the upper quadrants103 a and 103 b and bottom edge of the lower quadrants 103 c and 103 d)from the bottom edge and three-quarters from the top edge. In accordancewith this placement, the interface resizing system moves the pivot point106 at a rate of 0.5 pixels for every 2 pixels that the interfaceresizing system moves the quadrants 103 a and 103 b in response to userinput, so as to maintain the proportional (e.g., percentage) position ofthe pivot point.

Furthermore, in some embodiments, the interface resizing system analyzesthe area around the pivot point 106 within the graphical user interface102 to identify characteristics of the area. Additionally oralternatively, the interface resizing system analyzes the area aroundthe horizontal transverse line 108 (or other transverse line) toidentify characteristics along the transverse line. For example, thearea along the horizontal transverse line 108 may have a particularbackground color, texture, background image, etc. The interface resizingsystem uses the characteristics of the area along the transverse line(e.g., horizontal transverse line 108) to match the new space (e.g.,space 204) added to the graphical user interface 102 to the area aroundthe pivot point 106 for a more seamless integration. As an example, ifthe horizontal transverse line 108 crosses in an area of solid bluecolor, the interface resizing system adds space 204 to the such that thesolid blue color runs consistently through the new space 204 to matchthe solid blue color originally around the horizontal transverse line108.

More specifically, the interface resizing system operates on a displaylist of vector objects and/or vector elements. Generally, a vectorobject or vector element refers to a computer-generated graphic whoseshape is defined by a path. The shape of the path is determined bypoints plotted along the path. Thus, in response to detecting anincrease (or decrease) in size of a user selection including one or morevector objects or vector elements, each selected vector object or vectorelement dictates its own increase in size. For instance, in response todetecting an increase in size of a rectangle, the rectangle takes thenew space as part of itself. Likewise, in response to detecting anincrease in size of a grid or repeated pattern, the grid repeats itselfwithin the new space to fill and remain a contiguous vector graphic thatfollows its vector path.

FIG. 3 illustrates movement of the quadrants 103 of the graphical userinterface 102 in response to user input to decrease the size of thegraphical user interface 102. As shown in FIG. 3, the interface resizingsystem shrinks the graphical user interface 102 in response to detectinguser input to move the top edge of the graphical user interface 102 in adownward direction toward the pivot point. In particular, FIG. 3illustrates how the interface resizing system decreases the size of thegraphical user interface 102 from the size shown in FIG. 2.

For example, the interface resizing system detects a user input toselect handle 104 b, as discussed above. The interface resizing systemfurther detects a user input to move the top edge of the graphical userinterface 102 downward toward the pivot point 106. More specifically,the interface resizing system detects a vertical component of the userinput (e.g. a number of pixels moved in the downward direction), and theinterface resizing system moves quadrants 103 a and 103 b downward withthe selected edge accordingly.

As illustrated in FIG. 3, the graphical user interface 102 includes asection of overlapping space 302. In particular, overlapping space 302indicates an amount that the interface resizing system shrinks thegraphical user interface 102. The top boundary of the overlapping space302 indicates a location at which the bottom edges of quadrants 103 aand 103 b started when the user began to drag the top edge of thegraphical user interface 102 downward. The bottom boundary of theoverlapping space 302, illustrated as horizontal transverse line 108,indicates a location to which the interface resizing system moves thebottom edge of quadrants 103 a and 103 b, overlapping quadrants 103 cand 103 d, respectively. Accordingly, the vertical length of theoverlapping space 302 is the vertical distance of the user input andalso the vertical distance of the space that the interface resizingsystem removes from the graphical user interface 102.

To that end, the interface resizing system removes the overlapping space302 from the graphical user interface 102. As discussed above withreference to FIG. 2, in some embodiments, the interface resizing systemremoves the overlapping space 302 upon detecting a release of the userinput. As also discussed above, a vector graphic (e.g., a vector elementor vector object) resizes based on its defined vector path in responseto user input to decrease its size. Accordingly, as the user maintainsthe user input (e.g., continuously depresses a mouse click orcontinuously maintains finger contact with a touchscreen), the interfaceresizing system moves the quadrants 103 a and 103 b up or down,increasing or decreasing the size of the overlapping space 302 with theuser input. Upon detecting a release of the user input, the interfaceresizing system removes the overlapping space 302 from the graphicaluser interface 102, decreasing the size of the graphical user interface.

In extreme cases where, for example, an element within quadrant 103 a(e.g., element 112 b) crosses entirely into quadrant 103 c in responseto user input to decrease the size of the graphical user interface 102,the interface resizing system continues to move and scale in accordancewith the rules associated with quadrant 103 a (e.g., the quadrant inwhich the element 112 b was located with the scale/movement operationbegan), as described above. Additionally, the interface resizing systemprevents elements from moving beyond (e.g., outside) the user selectionboundary. For example, if the interface resizing system detects a userinput to decrease the size of the graphical user input 102 to the pointwhere the element 102 b would cross into quadrant 103 c and then furthercross out of quadrant 103 c were the interface resizing system tocontinue to scale/move the element 112 b in the same manner, theinterface resizing system instead prevents the element 112 b fromcrossing beyond the edge of quadrant 103 c. Accordingly, as a userselection gets very small, the interface resizing system first preventsthe elements from translating outside a selection boundary. Furthermore,if the user input continues until the selection size is smaller than therelevant dimension of an element (e.g., element 112 b), the interfaceresizing system reduces the size of the element.

Similar to the discussion above in FIG. 2, the interface resizing systemdoes not move quadrants 103 c and 103 d in response to detecting theuser input to resize the graphical user interface 102 illustrated inFIG. 3. Rather, the interface resizing system maintains the position ofquadrants 103 c and 103 d and instead moves quadrants 103 a and 103 bdownward with the user input. Accordingly, the horizontal transverseline 108 also moves downward with the user input as the overlappingspace 302 grows.

In some embodiments, the interface resizing system removes theoverlapping space 302 from the non-moving quadrants. More particularly,the interface resizing system removes the overlapping space only fromquadrants 103 c and 103 d, and maintains the size of quadrants 103 a and103 b. In these embodiments, the interface resizing system maintains thesize of the moving quadrants (e.g., the quadrants 103 a and 103 b thatare bound to the moving top edge of the graphical user interface 102)and adjusts the size of the non-moving quadrants.

In other embodiments, the interface resizing system removes some otherspace from the graphical user interface 102—i.e., the interface resizingsystem removes a space equal in size to the overlapping space 302, butdoes not necessarily remove the portion of the graphical user interface102 shown within the overlapping space 302 itself. Indeed, in theseembodiments, the overlapping space 302 represents an amount of spacethat the interface resizing system removes but does not represent theactual removed space itself.

To illustrate, the interface resizing system removes space from thegraphical user interface 102 based on various factors. For example, theinterface resizing system analyzes the graphical user interface 102 toidentify elements (e.g., elements 112) therein, as discussed above. Theelements 112 have various characteristics or attributes such aspositions or placements within quadrants 103 of the graphical userinterface 102. To prevent removal of, or other undesirable alterationsto, the elements 112 within the graphical user interface 102 (e.g.,moving an element by changing the distance between an element and one ormore of the edges of the graphical user interface 102), the interfaceresizing system determines portions of the graphical user interface thatare devoid of elements 112 and that may be removed without deleteriouseffects.

For example, as illustrated in FIG. 3, the graphical user interface 102contains a portion of empty space that has no elements 112 within it(e.g., the space above the “Place Order” element, numbered 112 e in FIG.1). Thus, to maintain the relationships and attributes of the elements112, the interface resizing system analyzes the graphical user interface102 to identify the empty space, and removes a portion of the emptyspace that is the size of the overlapping space 302.

In these or other embodiments, the interface resizing system removes aportion of space based on a location of the pivot point 106. Toillustrate, the interface resizing system scales objects or elementsthat intersect a horizontal and/or vertical position of the pivot point106 based on the direction of the user input—i.e., the interfaceresizing system grows or shrinks the object/element proportionally tothe size (e.g., distance) of the user input, regardless of the size ofthat user input. Based on placing the pivot point 106 in a region devoidof objects/elements, the interface resizing system will not scale anyobjects or elements because none will intersect a horizontal and/orvertical position of the pivot point 106.

In some embodiments, the interface resizing system removes a space thatis the size of the overlapping space 302 equally from the moving portion(e.g., quadrants 103 a and 103 b) and the non-moving portion (e.g.,quadrants 103 c and 103 d) of the graphical user interface 102. Forexample, the interface resizing system identifies a portion of quadrants103 a and 103 b that is devoid of elements 112, and further identifies aportion of quadrants 103 c and 103 d that is also devoid of elements112. Accordingly, the interface resizing system removes space equal insize to the overlapping space 302 from quadrants 103 a and 103 b andquadrants 103 c and 103 d, where half of removed space is in quadrants103 a and 103 b and the other half is in quadrants 103 c and 103 d. Inother embodiments, the interface resizing system removes differentamounts of space from quadrants 103 a and 103 b than from 103 c and 103d, not necessarily keeping the removal of space even between the movingand non-moving portions of the graphical user interface 102.

As discussed above with reference to FIG. 2, the interface resizingsystem moves the pivot point 106 to keep it in the center of thechanging space (e.g., the overlapping space 302). More specifically, theinterface resizing system moves the pivot point 106 downward to keep itin the center of the overlapping space 302. As an example, the interfaceresizing system moves the pivot point downward at one-half the rate ofthe vertical component of the user input to resize the graphical userinterface 102, which mechanics are discussed in more detail above withreference to FIG. 2.

FIG. 4 illustrates the graphical user interface 102 where the user movesthe location of the pivot point 106. In particular, the interfaceresizing system detects a user input to select the pivot point 106. Inresponse to detecting the selection of the pivot point 106, theinterface resizing system displays the horizontal transverse line 108and further displays a vertical transverse line 402 to depict thesegmentation of the quadrants 103 of the graphical user interface 102,and to depict the location of the pivot point 106 at the intersection ofthe lines. The vertical transverse line 402 spans the graphical userinterface 102 from top to bottom and intersects the horizontaltransverse line 108 at the pivot point 106.

As the user moves (e.g., drags) the pivot point 106 to a new locationwith cursor 110, as shown in FIG. 4, the interface resizing system movesthe horizontal transverse line 108 and the vertical transverse line 402with the pivot point 106. In other words, the interface resizing systemdisplays the horizontal transverse line 108 and the vertical transverseline 402 to always intersect at the pivot point 106.

After moving the pivot point 106, the horizontal transverse line 108,and the vertical transverse line 402, the interface resizing systemanalyzes the graphical user interface 102 to identify those elements 112that exist within each of the quadrants 103. As an example, theinterface resizing system analyzes the graphical user interface 102 todetermine that element 112 a exists within quadrant 103 a, that element112 b also exists within quadrant 103 a, that element 112 e existswithin quadrants 103 c and 103 d, etc. As described above, the interfaceresizing system determines the placement and spacing of each of theelements 112 within the graphical user interface 102 to maintain thatplacement and spacing throughout resizing the graphical user interface102.

As illustrated in FIG. 4, the interface resizing system createsquadrants 103 of different sizes in response to user input to move thepivot point 106. Indeed, as described above, the pivot point 106delineates the quadrants 103 of the graphical user interface 102.Accordingly, when the interface resizing system moves the pivot point106 in response to detecting a user input to do so, the interfaceresizing system also resizes the quadrants 103. In particular, FIG. 4illustrates that quadrants 103 a and 103 b are the same size, and thateach of quadrants 103 a and 103 b are larger than quadrants 103 c and103 d, which are also the same size. Since the interface resizing systemin FIG. 4 moves the pivot point 106 in only a vertical directiondirectly downward, quadrants 103 a and 103 remain the same size, as doquadrants 103 c and 103 d. If, for example, the user clicks and dragsthe pivot point 106 in a horizontal direction as well as a verticaldirection, the interface resizing system creates quadrants 103 ofdifferent sizes where quadrant 103 a may be a different size thanquadrant 103 b, and may further be a different size than quadrants 103 cand 103 d.

In any case, the interface resizing system analyzes each of quadrants103 to identify elements 112 therein, and to further determineattributes and relationships of each element. For example, the interfaceresizing system determines a distance from each element and the edges ofthe quadrant in which is it located to define a placement for eachelement. After determining these attributes and relationships, asdiscussed above, the interface resizing system maintains thoserelationships with respect to each of quadrants 103, regardless of thesize of each quadrant.

FIG. 5 illustrates the graphical user interface 102 as a result of theuser moving the cursor 110 to hover over or near handle 104 g, on thelower-left corner of the graphical user interface 102. As describedabove, the interface resizing system interprets interactions with acorner (e.g., interactions with a handle placed on a corner) of thegraphical user interface 102 as interactions with the two edges of thegraphical user interface 102 that make up the particular corner. Thus,as shown in FIG. 5, the interface resizing system detects that thecursor 110 is located near handle 104 g, which indicates a potentialselection of the left edge and the bottom edge of the graphical userinterface 102.

Accordingly, the interface resizing system displays the horizontaltransverse line 108 and the vertical transverse line 402 to depict thesegmentation of the quadrants 103 to the user. The interface resizingsystem further highlights the elements 112 by outlining each of theidentified elements 112 or, in some embodiments, by changing a color ofthe elements 112 or by adding a highlight color, etc.

In any event, in response to detecting a user input to select the handle104 g, the interface resizing system binds the quadrants 103 to theirrespective edges. More specifically, as described above, the interfaceresizing system binds quadrant 103 a to the top edge and the left edgeof the graphical user interface 102, quadrant 103 b to the top edge andthe right edge of the graphical user interface 102, quadrant 103 c tothe bottom edge and the left edge of the graphical user interface 102,and quadrant 103 d to the bottom edge and the right edge of thegraphical user interface 102. By binding the quadrants 103 in this way,the interface resizing system keeps each quadrant and its contents(e.g., elements) intact, and enables the user to move each quadrantindependently of the others to resize the graphical user interface 102.

As mentioned, in further response to detecting a user input to selectthe lower-left corner of the graphical user interface 102, the interfaceresizing system determines a location of each of the elements 112 (e.g.,based on their respective centroids) with respect to the location of thepivot point 106. Depending on the location of a given element, theinterface resizing system applies rules to either move or scale (e.g.,resize) the element. To illustrate, the interface resizing systemdetermines that element 112 a is located entirely within quadrant 103 a,whereas element 112 e crosses the boundary between quadrants 103 c and103 d (i.e., crosses the vertical transverse line 402). Thus, inresponse to detecting a user input to move the lower-left corner, theinterface resizing system moves element 112 a by a percentage of themovement of the lower-left corner so as to keep element 112 a in aconsistent percentage position relative to the edges of the userselection (e.g., the graphical user interface 102). In contrast, theinterface resizing system scales the element 112 e in response todetecting user input to move the lower-left corner horizontally. Thus,the centroid of the element 112 e does not change location, but theinterface resizing system scales element 112 e in accordance with thehorizontal component of the user input.

Indeed, as illustrated in FIG. 6, the interface resizing system moveseach quadrant bound to the left edge and each quadrant bound to thebottom edge of the graphical user interface 102. As discussed above,since the user moves the lower-left corner down and to the left—i.e., intwo dimensions—the interface resizing system moves quadrant 103 ahorizontally to the left, moves quadrant 103 d vertically downward, andmoves quadrant 103 c down and to the left. The interface resizing systemkeeps quadrant 103 b in place because quadrant 103 b is not adjacent toa moving edge.

Generally, the interface resizing system implements horizontal movementusing a different sign than vertical movement so that movement in onedimension is independent of the other. To illustrate from FIG. 6, theinterface resizing system moves quadrants 103 a and 103 c to the leftwhile also moving quadrants 103 c and 103 d downward in accordance withuser input to move the lower-left corner diagonally down and to theleft. If, on the other hand, the interface resizing system detects userinput to select the upper-right corner and move the corner diagonallydown and to the right, the interface resizing system can move quadrants103 a and 103 b downward while also moving quadrants 103 b and 103 d tothe right. Thus, depending on which corner of the graphical userinterface (e.g., graphical user interface 102 of FIG. 5) is selected,the interface resizing system can resize the graphical user interface(or other user selection) in a horizontal dimension and a verticaldimension, independently of each other.

To illustrate, since the lower-left corner of the graphical userinterface 102 is comprised of the left edge and the bottom edge, theinterface resizing system moves quadrants bound to the left edge (e.g.,quadrants 103 a and 103 c) in response to detecting user input to movethe left edge. The interface resizing system also moves quadrants boundto the bottom edge (e.g., quadrants 103 c and 103 d) in response todetecting user input to move the bottom edge. Likewise, if the interfaceresizing system detects a user input to move a different corner of thegraphical user interface 102, the interface resizing system moves thequadrants 103 bound to the edges that make up the selected corner.

Furthermore, as the interface resizing system moves quadrants 103 a, 103c, and 103 d, the interface resizing system also moves the elements 112located therein, and maintains the relative position of each of theelements 112 within their respective quadrants. To illustrate from FIG.6, the interface resizing system keeps element 112 a in its respectiveposition within quadrant 103 a as quadrant 103 a moves to the left.Likewise, the interface resizing system maintains the relative positionof elements 112 b, 112 c, and 112 d within quadrant 103 a as well.Indeed, in some embodiments, the interface resizing system identifieselements 112 b, 112 c, and 112 d as a set and therefore moves the set ofelements 112 b-112 d together to maintain positions relative to eachother as well as to the edges of the quadrant 103 a.

As further discussed above, the interface resizing system also scaleselements that cross a boundary between two or more elements. As anexample, because element 112 f exists within quadrant 103 c and 103 d,the interface resizing system scales element 112 f to maintain itsspacing relative to the left edge, the bottom edge, and the right edgeof the graphical user interface 102. That is to say, the interfaceresizing system stretches element 112 f horizontally in accordance withthe horizontal component of the user input. Accordingly, the element 112f retains is spacing from edges of the quadrants 103 c and 103 d inwhich it resides.

Furthermore, the interface resizing system maintains the font size ofthe element 112 e as well as its relative position within element 112 fas the user resizes the graphical user interface 102. In particular,even though element 112 e crosses a boundary between quadrants 103 c and103 d, the interface resizing system nonetheless identifies that element112 e is a text label and, to retain consistency with the other textwithin the graphical user interface 102, the interface resizing systemdoes not scale the element 112 e but rather maintains itscharacteristics such as font size and shape. Thus, the interfaceresizing system may rank or prioritize factors to determine whether toscale an element that crosses a boundary between quadrants 103. Inparticular, the interface resizing system may rank attributes such asfont size and element shape as more important than attributes such asspacing of the element from a given edge of a quadrant. Additionally oralternatively, the interface resizing system may determine that, becauseelement 112 e is located within another element 112 f that crosses theboundary between quadrants 103 c and 103 d, then the outermost element(e.g., the element 112 f in which the other element 112 e resides) isthe element to scale, and the inner element may remain the same size.Nevertheless, the interface resizing system maintains the relativeposition of the element 112 e within element 112 f.

In moving the quadrants 103 a, 103 c, and 103 d that are adjacent to themoving edges of the graphical user interface 102, the interface resizingsystem creates new space to add between the quadrants 103. For instance,as the interface resizing system moves quadrants 103 c and 103 ddownward with the vertical component of the user input, the interfaceresizing system creates space 604 between quadrants 103 c and 103 d andquadrants 103 a and 103 b. Space 604 indicates an amount of space thatthe interface resizing system adds in the vertical dimension.

In addition, as shown in FIG. 6, the horizontal transverse line 108 isillustrated to show the bottom boundary of quadrants 103 a and 103 b,and to further show the point at which the top edge of quadrants 103 cand 103 d began before the user slid the bottom-left corner of thegraphical user interface 102 down and to the left (e.g., as shown inFIG. 5). Accordingly, boundary line 602 illustrates the top boundary ofquadrants 103 c and 103 d. Similarly, FIG. 6 illustrates space 606 thatindicates the horizontal component of the user input in moving thebottom-left corner of the graphical user interface 102 down and to theleft. Additionally, the space 606 represents the new space that theinterface resizing system adds to the graphical user interface to resizethe graphical user interface in response to the user input.

As further illustrated in FIG. 6, the interface resizing system movesthe pivot point 106 with the user input to stay centered within the newspace that the interface resizing system adds (e.g., in accordance withvector graphics principles, as described above) to the graphical userinterface 102. More specifically, the interface resizing system movesthe pivot point 106 in relation to a proportional (e.g., percentage)position within given selection bounds (e.g., the graphical userinterface 102). Indeed, as illustrated in FIG. 6, the interface resizingsystem moves the pivot point at a rate that is a particular percentageof the rate at which the interface resizing system moves the selectedcorner. To illustrate, since the pivot point is centered between theleftmost edge of the graphical user interface 102 (e.g., the userselection) and the rightmost edge of the graphical user interface 102,the interface resizing system moves the pivot point 106 horizontally ata rate of one-half the horizontal movement of the selected corner. Thus,for every two pixels the interface resizing system moves the selectedcorner to the left (e.g., in response to user input), the interfaceresizing system moves the pivot point 106 one pixel to the left.

With relation to the vertical movement of the pivot point 106, as shownin FIG. 6, the pivot point 106 is located at one quarter of the distanceup from the bottom edge of the graphical user interface 102 (e.g., theuser selection), which means that it is three quarters down from the topedge of the graphical user interface 102. Accordingly, the interfaceresizing system moves the pivot point 106 vertically downward at a rateof three-quarters of the rate that the interface resizing system movesthe selected corner vertically downward. By moving the pivot point at arate that is based on its percentage position within the user selection,the interface resizing system maintains the percentage position of thepivot point 106 within the user selection (e.g., the graphical userinterface 102) throughout any resizing operation.

FIG. 7 illustrates the graphical user interface 102 in response to theinterface resizing system detecting a user input to select an objectwithin the graphical user interface 102 (e.g., an object that is lessthan the entire graphical user interface 102). In particular, as shownin FIG. 7, the interface resizing system detects a user input to selectthe object 700 containing the user's name and payment information,including a space for entering a credit card number, CVV number, date,etc. As discussed above, the interface resizing system detects the userinput to select the object 700 and displays handles to enable the userto select and/or move one or more of the edges of the object 700.

Additionally, the interface resizing system segments the object 700 intoquadrants, as discussed above. Particularly, the interface resizingsystem partitions the four quadrants of the object based on the locationof the pivot point, where the vertical coordinate of the pivot pointdefines the upper boundary of the two lower quadrants, and defines thelower boundary of the two upper quadrants. Similarly, the horizontalcoordinate of the pivot point defines the left boundary of the twoquadrants on the right side, and further defines the right boundary ofthe two quadrants on the left side of object 700.

In addition, the interface resizing system analyzes the selected object700 to identify elements 702 a, 702 b, 702 c, 702 d, and 702 e (referredto herein collectively as “elements 702”). In some embodiments, theinterface resizing system does not automatically identify the elements702, but instead receives user input to select each of the elements 702.In particular, the user may desire to resize or otherwise adjust each ofelements 702 uniformly together, even if the elements 702 are not partof a set (or do not have any obvious visual relationship) identified bythe interface resizing system. Thus, the interface resizing system mayreceive user input to group the elements 702 together so that theinterface resizing system performs operations on the elements 702together as a group.

To identify the elements 702, the interface resizing system analyzes theobject 700 to determine in which quadrants the elements 702 reside. Toillustrate, the interface resizing system may determine that element 702a is located in the upper-left quadrant of the object 700. In addition,the interface resizing system may determine that the element 702 b islocated both within the upper-left quadrant as well as the lower-leftquadrant of the object 700—i.e., element 702 b crosses the boundarybetween the quadrants. Furthermore, the interface resizing systemdetermines that the element 702 c is located in the lower-rightquadrant, determines that the element 702 d crosses the boundary betweenthe upper-right quadrant and the lower-right quadrant, and determinesthat element 702 e is located in the lower-right quadrant.

As discussed above, the interface resizing system further determinesrelationships and attributes of each of the elements 702. To illustrate,the interface resizing system determines a proportional placement of theelement 702 a within the upper-left quadrant so that, in response todetecting user input to resize the object 700, the interface resizingsystem maintains the proportional placement of the element 702 a withinthe upper-left quadrant. In addition, the interface resizing systemscales objects that cross the boundary between quadrants. For instance,the interface resizing system may identify the boxes that containelements 702 a, 702 b, and 702 c as elements that cross the boundariesbetween quadrants.

To illustrate from FIG. 8, in response to detecting user input to resizethe object 700, the interface resizing system scales the boxes toincrease or decrease their size, depending on the direction of the userinput. Indeed, as illustrated in FIG. 8, the interface resizing systemdecreases the size of the object 700 by collapsing the object 700 to theleft in response to detecting user input to move the right edge of theobject 700 toward the pivot point.

To resize the object 700, the interface resizing system detects a userinput to select and move one or more edges of the object 700. Asdiscussed above, in response to detecting a user input to select theright edge of the object 700 (e.g., to select the handle on the rightedge), the interface resizing system binds the quadrants of the object700 to their respective edges. Furthermore, the interface resizingsystem pins the elements 702 to maintain the proportional placement ofthe elements 702 within their respective quadrants (or to scale theelements 702 accordingly). Indeed, as shown in FIG. 8, as the interfaceresizing system moves the right edge of the object 700 to the left(e.g., toward the pivot point), the interface resizing system collapsethe two quadrants on the right into the two quadrants on the left inaccordance with a horizontal component of the user input.

As the user drags the right edge of the object 700, the interfaceresizing system generates an overlapping space 802 to depict the amountof space that the interface resizing system will remove from the object700 (e.g., upon release of the mouse or finger). As the user moves theright edge of the object 700 farther to the left, the interface resizingsystem increases the size of the overlapping space 802. On the otherhand, as the user moves the right edge to the right, the interfaceresizing system decreases the size of the overlapping space 802.

Furthermore, as shown in FIG. 8, the interface resizing system maintainsthe placement of elements 702 within their respective quadrants, andfurther scales those elements that cross a boundary between quadrants,so long as the interface resizing system determines that they areelements that should be scaled. Indeed, as described above, theinterface resizing system does not scale some elements that cross aboundary between quadrants because, in some cases, the elements containtext that needs to remain constant for aesthetic appearance andconsistency with other text within the object 700.

FIG. 9 illustrates a block diagram of various components associated withthe interface resizing system. In particular, FIG. 9 illustrates anexample embodiment of interface resizing system 900 (e.g., the interfaceresizing system referenced and describe above) and the functionality ofits various components. As shown, the interface resizing system 900 mayinclude, but is not necessarily limited to, a user input manager 902, auser selection analyzer 904, a set identifier 906, a quadrant manager908, a display manager 910, and a storage manager 912. Although FIG. 9illustrates a particular number of components in a particulararrangement, it will be understood from the disclosure herein that, insome embodiments, the interface resizing system 900 may include more orfewer components, and the components may be in additional or alternativearrangements. Furthermore, in some embodiments, the components describedhereafter may perform additional or alternative tasks to enable theinterface resizing system 900 to perform the functions described abovewith reference to FIGS. 1-8.

As mentioned, the interface resizing system 900 includes a user inputmanager 902. In certain embodiments, the user input manager 902 receivesuser input by way of, for example, a mouse, keyboard, touchscreen, orother user input device. In response to receiving user input, the userinput manager 902 communicates with other components of the interfaceresizing system 900 to perform tasks based on the user input. Forexample, the user input manager 902 communicates with the user selectionanalyzer 904 to transmit data related to a user selection (e.g., anobject within a graphical user interface). To illustrate, the user inputmanager 902 may transmit information indicating a click input to selectan object, or else may transmit information indicating a click-and-draginput to select a particular area within an object or graphical userinterface.

The user input manager 902 may also distinguish between various inputsfrom the user. For instance, the user input manager 902 identifies auser input to select a handle on an object (e.g., a click or tap), andthe user input manager further identifies a user input to move thehandle on the object (e.g., a drag or other movement input).Furthermore, the user input manager 902 receives and identifiesinformation related to cursor location. For example, the user inputmanager 902 identifies the location of the cursor, and in response todetecting that the cursor is located on or near a handle or otheruser-selectable item, the user input manager 902 communicates with theuser selection analyzer 904 and/or the display manager 910 to display,for example, boxes highlighting the various elements identified withinthe user selection and/or to display one or more transverse lines, asdescribed above.

As further illustrated by FIG. 9, the interface resizing system 900includes a user selection analyzer 904. The user selection analyzer 904may receive an indication from the user input manager 902 of a userselection (e.g., an object). In response to receiving the indication ofthe user selection, the user selection analyzer 904 analyzes the userselection (e.g., object) to identify elements within the selection.Additionally, the user selection analyzer 904 communicates with, forexample, the set identifier 906 and the display manager 910 to transmitinformation about the identified elements. For example, in response toreceiving information pertaining to the identified elements, the displaymanager 910 may highlight each identified element within the userselection by, for example, placing a box around each identified element.

In addition to identifying elements within the user selection, the userselection analyzer 904 further identifies quadrants within the userselection. To illustrate, the user selection analyzer 904 utilizes alocation of the pivot point as a delineator between the four quadrantswithin the user selection, as described above. Thus, the user selectionanalyzer 904 determines a horizontal location and a vertical location ofthe pivot point and defines the boundaries of the quadrants based onthose locations. For example, the vertical location of the pivot pointrepresents the boundary between the upper two quadrants and the lowertwo quadrants, while the horizontal location of the pivot pointrepresents the boundary between the left two quadrants and the right twoquadrants.

Based on segmenting the user selection into quadrants, the userselection analyzer 904 further determines the placement of eachidentified element within each quadrant, and further determines whethereach element crosses a boundary between quadrants. If an element crossesa boundary between quadrants, the user selection analyzer 904communicates with the set identifier 906 to relay information as towhich boundary the element crosses and/or the two quadrants in which theelement is located. Indeed, the user selection analyzer 904 relaysinformation pertaining to the quadrant in which each element is locatedto the set identifier 906.

In response to receiving information from the user selection analyzer904, the set identifier 906 determines relationships and attributes ofelements. Particularly, the set identifier 906 utilizes the informationgathered by the user selection analyzer 904 to determine a location ofeach element relative to the location of the pivot point. For instance,the set identifier 906 determines the location of the centroid of eachelement relative to the location of the pivot point. Based on theselocations, the set identifier 906 further determines relationshipsbetween elements such as, for example, an alignment (e.g., a verticalalignment or a horizontal alignment) of the elements.

Beyond determining an alignment of an element, the set identifier 906further identifies a context of the element. For example, the setidentifier 906 determines a location of the element relative to otherelements (e.g., whether the element is located within another element).In response to determining that two or more elements share an alignmentwithin a given context (e.g., two elements inside the same box), the setidentifier 906 identifies a set composed of the two or more elements. Toelaborate, the set identifier 906 determines that the relationshipbetween the two elements is significant because the elements share analignment within a given context. Therefore, the set identifier 906determines that a scaling or movement operation should affect eachelement within the set in the same way.

In other embodiments, the set identifier 906 may determine that two ormore elements that share at least a threshold number of attributes(e.g., height, width, shape, color, font) belong to a set. Furthermore,the set identifier 906 can communicate with one or more other componentsof the interface resizing system 900. For instance, the set identifier906 can communicate with the quadrant manager 908 to transmitinformation relating to identified relationships and sets.

Additionally, the interface resizing system 900 includes a quadrantmanager 908. In particular, the quadrant manager 908 manages thequadrants within the user selection. To illustrate, the quadrant manager908 communicates with the user input manager 902 and the user selectionanalyzer 904 to detect when the user selects one or more edges of theuser selection, and to further determine the boundaries of each of thefour quadrants. In response to detecting a user input to select one ormore edges of the user selection, the quadrant manager 908 binds thequadrants to their respective edges of the user selection. To elaborate,and as described above, the quadrant manager 908 binds each quadrant tothe edges of the user selection to which each respective quadrant isadjacent. For example, the quadrant manager 908 binds the upper-leftquadrant to the top edge and the left edge of the user selection.Likewise, the quadrant manager 908 binds the upper-right quadrant to thetop edge and the right edge of the user selection, and so on for thelower-left and lower-right quadrants.

Furthermore, the quadrant manager 908 moves the quadrants together withany moving edges of the user selection. More specifically, the quadrantmanager 908 moves each individual object and/or element within a givenquadrant based on determined relationships between each object/elementand a pivot point, as described above. To illustrate, in someembodiments the quadrant manager 908 is essentially a component of aresize function. For instance, given a user selection, the quadrantmanager 908 runs a function on each object and/or element in theselection to determine where each object/element should be locatedwithin the user selection (e.g., in a global context), and at what size.The quadrant manager 908 repeats the function many times over during thecourse of a user input to scale or resize the user selection. In someembodiments, the quadrant manager 908 stops executing the function whenthe user input stops (e.g., the mouse is released). Furthermore, thequadrant manager 908 then invalidates the old relationships in favor ofdetermining new ones based on the new positions of objects/elementswithin the user selection.

For example, as the user moves the top edge of the user selection, thequadrant manager 908 moves those quadrants that are bound to the topedge (e.g., the top-left quadrant and the top-right quadrant) togetherwith the top edge, in accordance with the user input as detected by theuser input manager 902. Continuing the example, the quadrant manager 908constrains the movement of the quadrants according to which edge(s) ofthe user selection are selected. For instance, when the user inputmanager 902 indicates that the top edge of the user selection isselected, the quadrant manager 908 constrains the movement of the toptwo quadrants (e.g., those quadrants that are bound to the top edge) tothe vertical dimension (e.g., up or down). Likewise, if the user inputmanager 902 indicates that user selects the left edge or the right edgeof the user selection, the quadrant manager 908 constrains the movementof the quadrants bound to the selected edges to the horizontal (e.g.,left or right) dimension.

In cases where the user input manager 902 indicates that the userselects a corner of the user selection, the quadrant manager 908constrains the movement of the quadrants bound to the selected edges inthe same fashion. In other words, the quadrant manager 908 moves thequadrant bound to both moving edges (e.g., the two edges that make upthe selected corner) in both a horizontal direction and a verticaldirection in accordance with the user input. For the quadrants bound tojust one of the moving edges, the quadrant manager 908 constrains themovement of the quadrant to either a vertical dimension (e.g., for thequadrant bound to the horizontal selected edge) or a horizontaldimension (e.g., for the quadrant bound to the vertical selected edge).

As the quadrant manager 908 moves the quadrants, the quadrant manager908 further pins the identified elements within each quadrant. Inparticular, the quadrant manager 908 pins the elements to maintain theposition, spacing, etc. of the elements within their respectivequadrants. In addition, the quadrant manager 908 scales those elementsthat cross the boundary between quadrants in accordance with thedisclosure provided above.

Furthermore, as described above, for any quadrants that are bound tonon-moving edges of the user selection (e.g., edges that are notselected), the quadrant manager 908 maintains the position of thequadrant—i.e., the quadrant manager 908 does not move the quadrant.

As illustrated in FIG. 9, the interface resizing system 900 furtherincludes a display manager 910. The display manager 910 communicateswith the other components of the interface resizing system to, forexample, display the movement of the quadrants in response to userinput. Additionally, the display manager 910 displays the pivot point,horizontal and vertical transverse lines, elements, handles, and otherfeatures described above in response to receiving an indication from theuser input manager 902, user selection analyzer 904, and/or othercomponent of the interface resizing system 900 to do so. To illustrate,the display manager 910 may further communicate with a display of acomputing device to render thereon the graphical user interfacedescribed herein.

As further illustrated in FIG. 9, the interface resizing system 900includes a storage manager 912. The storage manager 912 includes thereinelement data 914 and quadrant data 916. In particular, the storagemanager 912 communicates with the user selection analyzer 904 to receiveand store element data 914 pertaining to each of the elements identifiedwithin the user selection. For instance, the storage manager 912 storesinformation relating to the position, size, and other attributes of eachelement. In this way, other components may access the element data 914so that the interface resizing system 900 may maintain the placement ofeach element within its respective quadrant throughout the movement ofone or more quadrants.

Furthermore, the storage manager 912 stores information relating to thesize and segmentation of the quadrants of the user selection in quadrantdata 916. In particular, the storage manager 912 stores informationrelating to the position of the pivot point, and further storesinformation about the rules that apply to each quadrant. For instance,upon detecting a user selection of an edge of the user selection, theuser input manager 902 and the quadrant manager 908 communicate with thestorage manager 912 to transmit information pertaining to whichquadrants are bound to the selected edge and which are not.

FIG. 10 illustrates a schematic diagram of one embodiment of anexemplary environment 1000 in which the interface resizing system 900operates. In one or more embodiments, the exemplary environment 1000includes a client device 1002, a network 1004, and one or more server(s)1006 housing the interface resizing system 900.

As illustrated in FIG. 10, the environment 1000 may include a clientdevice 1002. In particular, the client device 1002 can communicate, vianetwork 1004, with the server(s) 1006 housing the interface resizingsystem 900. Alternatively, the client device 1002 can house theinterface resizing system 900. Accordingly, the client device 1002 cancommunicate with the server(s) 1006 to request permission or access touse the interface resizing system 900 (e.g., in embodiments where theinterface resizing system 900 provides a subscription-based service).

As also illustrated in FIG. 10, the environment 1000 may further includea network 1004. In particular, the network 1004 can interface the clientdevice 1002 with the server(s) 1006. Accordingly, the network 1004 canfacilitate communications between the client device 1002 and theserver(s) 1006 via appropriate network protocol.

Although FIG. 10 illustrates a particular arrangement of the environment1000, including the client device 1002, the network 1004, and the one ormore server(s) 1006, various additional or alternative arrangements arepossible. For example, while FIG. 10 illustrates a single client device1002 in communication with a network 1004 and the server(s) 1006, in oneor more embodiments multiple client devices may communicate directlywith the server(s) 1006, bypassing network 1004.

In another example, in one or more embodiments, the environment 1000does not include server(s) 1006. Instead, the client device 1002 mayhouse the interface resizing system 900. Thus, the interface resizingsystem 900 may initiate an interface resizing process as describedabove. Therefore, the client device 1002 and/or the server(s) 1006 canresizing a graphical user interface or a selection within a graphicaluser interface, as described in detail above.

FIGS. 1-10, the corresponding text, and the examples provide a number ofdifferent systems and methods that resize a graphical user interface. Inaddition to the foregoing, embodiments can also be described in terms offlowcharts comprising acts and/or steps in a method for accomplishing aparticular result. For example, turning now to FIG. 11, this figureillustrates a flowchart of a series of acts 1100 of resizing a graphicaluser interface in accordance with one or more embodiments. While FIG. 11illustrates acts according to one embodiment, alternative embodimentsmay omit, add to, reorder, and/or modify any of the acts shown in FIG.11. The acts of FIG. 11 can be performed as part of a method.Alternatively, a non-transitory computer readable medium can compriseinstructions, that when executed by one or more processors, cause acomputing device to perform the acts of FIG. 11. In still furtherembodiments, a system can perform the acts of FIG. 11.

FIG. 11 illustrates an exemplary method 1100 for resizing a graphicaluser interface in accordance with one or more embodiments. Inparticular, as illustrated in FIG. 11, the method 1100 can include anact 1102 of detecting a selection of an object. For example, the act1102 can involve detecting a selection of an object within a graphicaluser interface presented for display to a user. In some embodiments, theselected object can include an entire graphical user interface.

In addition, the method 1100 can include an act 1104 of placing a pivotpoint within the selected object. In particular, the act 1104 caninvolve placing a pivot point within the selected object, the pivotpoint segmenting the selected object into quadrants, each quadrant beingbounded by two edges of the selected object as well as an initialvertical position of the pivot point and an initial horizontal positionof the pivot point. The method 1100 can include an act of determiningthat an element within the selected object crosses a boundary betweentwo or more quadrants, and, during the detected user input to resize theselected object, maintaining a relative position of the element withrespect to each quadrant by scaling the element in accordance with thedetected user input.

Furthermore, the method 1100 can include an act 1106 of detecting a userinput. In particular, the act 1106 can involve detecting a user input toresize the selected object, the user input including a selection of oneor more edges of the selected object and further including a movement ofthe one or more selected edges (e.g., in a given direction). Forexample, the user input to resize the selected object can include aselection of one edge of the selected object. Thus, moving the one ormore quadrants can include moving, along a single dimension, twoquadrants that are bound to the selected edge. In addition, the userinput to resize the graphical user interface can include a selection ofa corner of the selected object, the corner comprising an intersectionof two edges of the selected object. Accordingly, the movement of thedetected user input can include a horizontal component and a verticalcomponent, and moving the one or more quadrants can include moving,along a horizontal dimension and a vertical dimension, the threequadrants that are bound to the selected edges in accordance with thehorizontal component and the vertical component of the detected userinput, respectively.

Additionally, the method 1100 can include an act 1108 of moving one ormore quadrants. In particular, the act 1108 can involve, in response tothe user input, moving one or more quadrants in accordance with themovement of the one or more selected edges. The act 1108 can involvemoving one or more quadrants whose movement is fixed to movement of theone or more selected edges in the direction of the user input to resizethe selected object. As illustrated in FIG. 11, the act 1108 caninvolve, in response to detecting the selection of the one or more edgesof the selected object, fixing movement of each quadrant of the selectedobject to movement of any edges of the selected object that are adjacentto each respective quadrant. For example, the act 1108 can furtherinvolve fixing each quadrant to two edges of the selected object thatare adjacent to each respective quadrant such that, in response todetecting the movement of the one or more selected edges to resize theselected object, each quadrant moves with any movement of its boundedges.

Although not illustrated in FIG. 11, the method 1100 can include an actof, in response to detecting that the direction of the user input istoward the pivot point, collapsing the one or more quadrants that arebound to the one or more selected edges into one or more quadrants thatare bound to non-selected edges, and removing space from the selectedobject from the one or more quadrants that are bound to non-selectededges of the selected object. Similarly, the method 1100 can include anact of, in response to detecting that the direction of the user input isaway from the pivot point, adding space to the selected object betweenthe one or more quadrants that are bound to the one or more selectededges and one or more quadrants that are bound to non-selected edges ofthe selected object. For instance, adding space to the graphical userinterface can include adding new space with features that match a spacearound the pivot point.

Additionally, the method 1100 can include an act retaining a position ofone or more quadrants that are adjacent to one or more non-selectededges of the selected object. The method 1100 can also include acts ofdetecting a cursor location of a cursor operated by the user,determining one or more edges of the object that are nearest to thecursor location, and generating, for display to the user, one or moretransverse lines, each transverse line spanning the object parallel toone of the one or more edges of the object that are nearest to thecursor location, and each transverse line further intersecting the pivotpoint. Furthermore, the method 1100 can include an act of highlightingone or more quadrants of the object that are adjacent to the one or moreedges that are nearest to the cursor location.

The method 1100 can also include an act of generating, during the userinput to resize the selected object and in response to detecting thatthe direction of the user input is toward the pivot point, a view ofoverlapping space where the one or more moving quadrants that are boundto the one or more selected edges slide over one or more non-movingquadrants. The method 1100 can further include an act of generating,during the user input and in response to detecting that the direction ofthe user input is away from the pivot point, a view of new space to addto the selected object between the moving quadrants bound to the one ormore selected edges and the one or more non-moving quadrants.

Furthermore, the method 1100 can include an act of detecting a userinput to move the pivot point, an act of, in response to detecting theuser input to move the pivot point, generating, for display to the user,a vertical line through the pivot point and a horizontal line throughthe pivot point to help the user in repositioning the pivot point, andan act of repositioning the pivot point in accordance with the detecteduser input to move the pivot point.

Although not illustrated in FIG. 11, the method 1100 may also includeacts of analyzing the selected object to identify visually relatedelements within the selected object, and scaling the identified visuallyrelated elements together in accordance with the detected user input. Inparticular, identifying visually related elements can includedetermining a relationship between two or more elements based on alocation of the two or more elements within the selected object.

FIG. 12 illustrates a sequence 1200 of acts in a step for resizing aselected object in accordance with user input. In particular, thesequence 1200 includes an act 1202 to detect user input. For example,the interface resizing system detects user input to select one or moreedges of a user selection, as described in detail above.

As illustrated by FIG. 12, the sequence 1200 also includes an act 1204to bind the quadrants of the user selection to their respective edges.As described above, the interface resizing system binds each quadrant toits outer edges. In other words, the interface resizing system bindseach quadrant to the edges of the user selection that define any sidesof the given quadrant.

The sequence 1200 further includes an act 1206 to determine whether oneor two edges of the user selection are selected. In particular, theinterface resizing system detects whether a handle located only on anedge of the user selection is selected, or if a handle located on acorner of the user selection is selected. In response to detecting thata single edge is selected, the interface resizing system continues toact 1208 to determine if the selected edge is horizontal or vertical.

For instance, the interface resizing system detects which handle isselected and determines whether the handle is located on a horizontaledge or a vertical edge of the user selection. In response to detectingthat the selected edge is horizontal, the interface resizing systemperforms act 1210 and moves the selected edge vertically in accordancewith the user input. For example, the interface resizing systemconstrains the movement of the selected edge to the vertical dimensionbecause a horizontal edge can only move up or down to resize the userselection while maintaining the relative shape of the user selection.Accordingly, the interface resizing system detects a vertical componentof the user input and moves the selected edge based on the detectedvertical component, as described above.

In response to determining that the selected edge is vertical, theinterface resizing system executes act 1212 to move the selected edge ofthe user selection horizontally based on the user input. To illustrate,the interface resizing system constrains the movement of vertical edgesto the horizontal dimension (e.g., left and right), as described infurther detail above.

Conversely, if the interface resizing system determines that two edges(e.g., a corner) of the user selection are selected, the interfaceresizing system continues to execute act 1214 to determine whether thedetected user input to move the selected edges has a horizontalcomponent. In particular, the interface resizing system detects whetherthe user moves the selected edges, together with the cursor, to the leftand/or to the right.

In response to determining that the user input contains a horizontalcomponent, the interface resizing system moves on to perform act 1216 todetermine whether the user input includes a vertical component. If theuser input does include a horizontal component as well as a verticalcomponent, the interface resizing system performs act 1220 to move thequadrant bound to both of the selected edges diagonally in the directionof the user input. In addition, the interface resizing system performsact 1222 to move the quadrant bound to the vertical selected edge butnot bound to the horizontal selected edge in a horizontal direction withthe user input. Further, the interface resizing system performs act 1226and moves the quadrant bound to the horizontal selected edge but notbound to the vertical selected edge in a vertical direction with theuser input.

If, on the other, the interface resizing system determines that the userinput does not contain a vertical component in addition to itshorizontal component, the interface resizing system performs act 1226 tomove the quadrants bound to the vertical selected edge in a horizontaldirection in accordance with the user input.

Looking back to FIG. 12, if the interface resizing system determinesthat the user input does not include a horizontal component, then theinterface resizing moves to act 1218 to determine whether the user inputincludes a vertical component. In response to determining that the userinput contains a vertical component but no horizontal component, theinterface resizing system performs act 1228 to move the quadrants boundto the horizontal edge in a vertical direction in accordance with theuser input. In other words, the interface resizing system moves thosequadrants bound to the one horizontal edge of the two edges that formthe selected corner in a vertical direction. The interface resizingsystem maintains the positions of the other quadrants.

In response to determining that the user input does not include avertical component, and further does not include a horizontal, theinterface resizing system maintains the positions of all quadrants byperforming act 1230. In other words, the interface resizing system doesnot move any of the quadrants within the user selection.

While FIG. 12 illustrates a particular order of the acts within sequence1200, it will be understood from the disclosure herein that the acts maybe performed in additional or alternative orders. For example, in someembodiments, the interface resizing system may determine whether theuser input contains a vertical component (e.g., acts 126 and 1218)before determining whether the user input contains a horizontalcomponent (e.g., act 1214).

Embodiments of the present disclosure may comprise or utilize a specialpurpose or general-purpose computer including computer hardware, suchas, for example, one or more processors and system memory, as discussedin greater detail below. Embodiments within the scope of the presentdisclosure also include physical and other computer-readable media forcarrying or storing computer-executable instructions and/or datastructures. In particular, one or more of the processes described hereinmay be implemented at least in part as instructions embodied in anon-transitory computer-readable medium and executable by one or morecomputing devices (e.g., any of the media content access devicesdescribed herein). In general, a processor (e.g., a microprocessor)receives instructions, from a non-transitory computer-readable medium,(e.g., a memory, etc.), and executes those instructions, therebyperforming one or more processes, including one or more of the processesdescribed herein.

Computer-readable media can be any available media that can be accessedby a general purpose or special purpose computer system.Computer-readable media that store computer-executable instructions arenon-transitory computer-readable storage media (devices).Computer-readable media that carry computer-executable instructions aretransmission media. Thus, by way of example, and not limitation,embodiments of the disclosure can comprise at least two distinctlydifferent kinds of computer-readable media: non-transitorycomputer-readable storage media (devices) and transmission media.

Non-transitory computer-readable storage media (devices) includes RAM,ROM, EEPROM, CD-ROM, solid state drives (“SSDs”) (e.g., based on RAM),Flash memory, phase-change memory (“PCM”), other types of memory, otheroptical disk storage, magnetic disk storage or other magnetic storagedevices, or any other medium which can be used to store desired programcode means in the form of computer-executable instructions or datastructures and which can be accessed by a general purpose or specialpurpose computer.

Further, upon reaching various computer system components, program codemeans in the form of computer-executable instructions or data structurescan be transferred automatically from transmission media tonon-transitory computer-readable storage media (devices) (or viceversa). For example, computer-executable instructions or data structuresreceived over a network or data link can be buffered in RAM within anetwork interface module (e.g., a “NIC”), and then eventuallytransferred to computer system RAM and/or to less volatile computerstorage media (devices) at a computer system. Thus, it should beunderstood that non-transitory computer-readable storage media (devices)can be included in computer system components that also (or evenprimarily) utilize transmission media.

Computer-executable instructions comprise, for example, instructions anddata which, when executed at a processor, cause a general purposecomputer, special purpose computer, or special purpose processing deviceto perform a certain function or group of functions. In someembodiments, computer-executable instructions are executed on ageneral-purpose computer to turn the general-purpose computer into aspecial purpose computer implementing elements of the disclosure. Thecomputer executable instructions may be, for example, binaries,intermediate format instructions such as assembly language, or evensource code. Although the subject matter has been described in languagespecific to structural features and/or methodological acts, it is to beunderstood that the subject matter defined in the appended claims is notnecessarily limited to the described features or acts described above.Rather, the described features and acts are disclosed as example formsof implementing the claims.

Those skilled in the art will appreciate that the disclosure may bepracticed in network computing environments with many types of computersystem configurations, including, personal computers, desktop computers,laptop computers, message processors, hand-held devices, multi-processorsystems, microprocessor-based or programmable consumer electronics,network PCs, minicomputers, mainframe computers, mobile telephones,PDAs, tablets, pagers, routers, switches, and the like. The disclosuremay also be practiced in distributed system environments where local andremote computer systems, which are linked (either by hardwired datalinks, wireless data links, or by a combination of hardwired andwireless data links) through a network, both perform tasks. In adistributed system environment, program modules may be located in bothlocal and remote memory storage devices.

Embodiments of the present disclosure can also be implemented in cloudcomputing environments. In this description, “cloud computing” isdefined as a model for enabling on-demand network access to a sharedpool of configurable computing resources. For example, cloud computingcan be employed in the marketplace to offer ubiquitous and convenienton-demand access to the shared pool of configurable computing resources.The shared pool of configurable computing resources can be rapidlyprovisioned via virtualization and released with low management effortor service provider interaction, and then scaled accordingly.

A cloud-computing model can be composed of various characteristics suchas, for example, on-demand self-service, broad network access, resourcepooling, rapid elasticity, measured service, and so forth. Acloud-computing model can also expose various service models, such as,for example, Software as a Service (“SaaS”), Platform as a Service(“PaaS”), and Infrastructure as a Service (“IaaS”). A cloud-computingmodel can also be deployed using different deployment models such asprivate cloud, community cloud, public cloud, hybrid cloud, and soforth. In this description and in the claims, a “cloud-computingenvironment” is an environment in which cloud computing is employed.

FIG. 13 illustrates, in block diagram form, an exemplary computingdevice 1300 that may be configured to perform one or more of theprocesses described above. One will appreciate that the interfaceresizing system 900 can comprise implementations of the computing device1300. As shown by FIG. 13, the computing device can comprise a processor1302, memory 1304, a storage device 1306, an I/O interface 1308, and acommunication interface 1310. In certain embodiments, the computingdevice 1300 can include fewer or more components than those shown inFIG. 13. Components of computing device 1300 shown in FIG. 13 will nowbe described in additional detail.

In particular embodiments, processor(s) 1302 includes hardware forexecuting instructions, such as those making up a computer program. Asan example, and not by way of limitation, to execute instructions,processor(s) 1302 may retrieve (or fetch) the instructions from aninternal register, an internal cache, memory 1304, or a storage device1306 and decode and execute them.

The computing device 1300 includes memory 1304, which is coupled to theprocessor(s) 1302. The memory 1304 may be used for storing data,metadata, and programs for execution by the processor(s). The memory1304 may include one or more of volatile and non-volatile memories, suchas Random Access Memory (“RAM”), Read Only Memory (“ROM”), a solid statedisk (“SSD”), Flash, Phase Change Memory (“PCM”), or other types of datastorage. The memory 1304 may be internal or distributed memory.

The computing device 1300 includes a storage device 1306 includesstorage for storing data or instructions. As an example, and not by wayof limitation, storage device 1306 can comprise a non-transitory storagemedium described above. The storage device 1306 may include a hard diskdrive (HDD), flash memory, a Universal Serial Bus (USB) drive or acombination of these or other storage devices.

The computing device 1300 also includes one or more input or output(“I/O”) devices/interfaces 1308, which are provided to allow a user toprovide input to (such as user strokes), receive output from, andotherwise transfer data to and from the computing device 1300. These I/Odevices/interfaces 1308 may include a mouse, keypad or a keyboard, atouch screen, camera, optical scanner, network interface, modem, otherknown I/O devices or a combination of such I/O devices/interfaces 1308.The touch screen may be activated with a stylus or a finger.

The I/O devices/interfaces 1308 may include one or more devices forpresenting output to a user, including, but not limited to, a graphicsengine, a display (e.g., a display screen), one or more output drivers(e.g., display drivers), one or more audio speakers, and one or moreaudio drivers. In certain embodiments, devices/interfaces 1308 isconfigured to provide graphical data to a display for presentation to auser. The graphical data may be representative of one or more graphicaluser interfaces and/or any other graphical content as may serve aparticular implementation.

The computing device 1300 can further include a communication interface1310. The communication interface 1310 can include hardware, software,or both. The communication interface 1310 can provide one or moreinterfaces for communication (such as, for example, packet-basedcommunication) between the computing device and one or more othercomputing devices 1300 or one or more networks. As an example, and notby way of limitation, communication interface 1310 may include a networkinterface controller (NIC) or network adapter for communicating with anEthernet or other wire-based network or a wireless NIC (WNIC) orwireless adapter for communicating with a wireless network, such as aWI-FI. The computing device 1300 can further include a bus 1311. The bus1311 can comprise hardware, software, or both that couples components ofcomputing device 1300 to each other.

In the foregoing specification, the invention has been described withreference to specific exemplary embodiments thereof. Various embodimentsand aspects of the invention(s) are described with reference to detailsdiscussed herein, and the accompanying drawings illustrate the variousembodiments. The description above and drawings are illustrative of theinvention and are not to be construed as limiting the invention.Numerous specific details are described to provide a thoroughunderstanding of various embodiments of the present invention.

The present invention may be embodied in other specific forms withoutdeparting from its spirit or essential characteristics. The describedembodiments are to be considered in all respects only as illustrativeand not restrictive. For example, the methods described herein may beperformed with less or more steps/acts or the steps/acts may beperformed in differing orders. Additionally, the steps/acts describedherein may be repeated or performed in parallel with one another or inparallel with different instances of the same or similar steps/acts. Thescope of the invention is, therefore, indicated by the appended claimsrather than by the foregoing description. All changes that come withinthe meaning and range of equivalency of the claims are to be embracedwithin their scope.

What is claimed is:
 1. A computer-implemented method comprising:receiving a selection of an object of a graphical user interfacedisplayed via a client device; placing a pivot point at a verticalposition and a horizontal position within the object; receiving aresizing interaction via the client device to modify a size of theobject; and in response to the resizing interaction, scaling the objectby modifying vertical space within the object at the vertical positionof the pivot point by moving a first edge of the object in a verticaldirection relative to the vertical position of the pivot point andmodifying horizontal space within the object at the horizontal positionof the pivot point by moving a second edge of the object in a horizontaldirection relative to the horizontal position of the pivot point.
 2. Thecomputer-implemented method of claim 1, wherein scaling the objectcomprises increasing a size of the object by: adding vertical space tothe object in the vertical direction from the vertical position of thepivot point; and adding horizontal space to the object in the horizontaldirection from the horizontal position of the pivot point.
 3. Thecomputer-implemented method of claim 1, wherein scaling the objectcomprises decreasing a size of the object by: removing vertical spacefrom the object in the vertical direction from the vertical position ofthe pivot point; and removing horizontal space from the object in thehorizontal direction from the horizontal position of the pivot point. 4.The computer-implemented method of claim 1, further comprising modifyingthe vertical position and the horizontal position of the pivot pointduring the resizing interaction to maintain: a relative verticalposition of the pivot point in relation to a top edge and a bottom edgeof the object; and a relative horizontal position of the pivot point inrelation to a left edge and a right edge of the object.
 5. Thecomputer-implemented method of claim 1, further comprising: identifyinga first element within the object that is intersected by the horizontalposition of the pivot point; and identifying a second element within theobject that is intersected by the vertical position and the horizontalposition of the pivot point.
 6. The computer-implemented method of claim5, wherein scaling the object comprises: scaling the first element bymodifying space within the first element in the horizontal directionfrom the horizontal position of the pivot point based on the resizinginteraction; and scaling the second element by modifying space withinthe second element in the vertical direction from the vertical positionof the pivot point and in a horizontal direction from the horizontalposition of the pivot point based on the resizing interaction.
 7. Thecomputer-implemented method of claim 5, further comprising maintainingrelative positions of the first element and the second element inrelation to each other during the scaling of the object.
 8. A systemcomprising: one or more memory devices; and one or more processors thatare configured to cause the system to: receive a selection of an objectof a graphical user interface displayed via a client device; place apivot point at a vertical position and a horizontal position within theobject; receive a resizing interaction via the client device to modify asize of the object; and in response to the resizing interaction, scalethe object by modifying horizontal space within the object at thehorizontal position of the pivot point by moving an edge of the objectin a horizontal direction relative to the horizontal position of thepivot point.
 9. The system of claim 8, wherein the one or moreprocessors are further configured to cause the system to: receive a userinteraction to move the pivot point to a second vertical position and asecond horizontal position within the object; and in response to theuser interaction to move the pivot point, moving the pivot point withinobject to the second vertical position and the second horizontalposition.
 10. The system of claim 9, wherein the one or more processorsare further configured to cause the system to: receive a second resizinginteraction via the client device to modify the size of the object; andin response to the second resizing interaction, rescaling the object bymodifying one or more of vertical space or horizontal space within theobject at the pivot point based on the second resizing interaction. 11.The system of claim 8, wherein the one or more processors are furtherconfigured to cause the system to: determine a plurality of elementsthat share an alignment relative to one another within the object; andmaintain the alignment of the plurality of elements relative to oneanother while scaling the object.
 12. The system of claim 8, wherein theone or more processors are further configured to cause the system to:identify a first element within the object that is intersected by thehorizontal position of the pivot point; and identify a second elementwithin the object that is not intersected by the horizontal position ofthe pivot point.
 13. The system of claim 12, wherein the one or moreprocessors are further configured to cause the system to scale theobject by: scaling the first element by modifying space within the firstelement in the horizontal direction relative to the horizontal positionof the pivot point based on the resizing interaction; and maintain asize of the second element while maintaining a relative position of thesecond element in relation to one or more edges of the object.
 14. Thesystem of claim 8, wherein the one or more processors are furtherconfigured to cause the system to: identify a text element within theobject intersected by the horizontal position of the pivot point; andmaintain a position of the text element relative to the horizontalposition of the pivot point during the scaling of the object.
 15. Anon-transitory computer readable medium comprising instructions that,when executed by at least one processor, cause a computing device to:receive a selection of an object of a graphical user interface displayedvia a client device; place a pivot point at a vertical position and ahorizontal position within the object; receive a resizing interactionvia the client device to modify a size of the object; and in response tothe resizing interaction, scale the object by modifying vertical spacewithin the object at the vertical position of the pivot point by movingan edge of the object in a vertical direction relative to the verticalposition of the pivot point.
 16. The non-transitory computer readablemedium of claim 15, further comprising instructions that, when executedby the at least one processor, cause the computing device to scale theobject by adding vertical space to the object in a vertical directionfrom the vertical position of the pivot point according to the resizinginteraction.
 17. The non-transitory computer readable medium of claim15, further comprising instructions that, when executed by the at leastone processor, cause the computing device to: determine elementsbelonging to a set of elements within the object according to one ormore shared element characteristics; and maintain proportional spacingamong the elements within the set of elements while scaling the object.18. The non-transitory computer readable medium of claim 15, furthercomprising instructions that, when executed by the at least oneprocessor, cause the computing device to: identify a first elementwithin the object that is intersected by the vertical position of thepivot point; and identify a second element within the object that is notintersected by the vertical position of the pivot point.
 19. Thenon-transitory computer readable medium of claim 18, further comprisinginstructions that, when executed by the at least one processor, causethe computing device to, scale the object by: scaling the first elementby modifying space within the first element in the vertical direction atthe vertical position of the pivot point; and maintain a size of thesecond element while maintaining a relative position of the secondelement in relation to one or more edges of the object.
 20. Thenon-transitory computer readable medium of claim 15, further comprisinginstructions that, when executed by the at least one processor, causethe computing device to: identify a text element within the object; andprevent distortion of the text element during the scaling of the object.